apeman-react-builder

    3.0.4 • Public • Published

    apeman-react-builder

    Build Status Code Climate Code Coverage npm Version JS Standard

    apeman react package for builder components.

    Installation

    $ npm install apeman-react-builder --save

    Demo

    Live demo is hosted on GitHub Pages.

    Usage

    'use strict'
     
    import React from 'react'
    import {ApBuilder, ApBuilderStyle} from 'apeman-react-builder'
    import {ApTabStyle} from 'apeman-react-tab'
    import {ApFrameStyle} from 'apeman-react-frame'
     
    const color = '#38E'
    const ExampleComponent = React.createClass({
      getInitialState () {
        return {
          html: `
    <html><body><!-- ** --></body></html>
    `,
          script: `
    console.log('hoge', window.foo)
    /* ... */
    `,
          globals: {
            foo: 'This is foo!!'
          }
        }
      },
     
      render () {
        const s = this
        let { state } = s
        return (
          <div>
            <ApBuilderStyle highlightColor={ color }/>
            <ApTabStyle highlightColor={ color }/>
            <ApButtonStyle highlightColor={ color }/>
            <ApFrameStyle highlightColor={ color }/>
            <ApBuilderStyle highlightColor={ color }/>
            <ApBuilder html={ state.html }
                       script={ state.script }
                       compile={ (script) => { /* ... */ return script } }
                       globals={ state.globals }/>
          </div>
        )
      }
    })
     
     

    Components

    ApBuilderEditor

    Props

    Name Type Default Description
    onChange func
    onCancel func
    onSubmit func
    labels object {

    cancel: 'Cancel', submit: 'Submit' } | | Label texts | | src | string | | | Editting source | | mode | string | | | Editting type | | error | string|object | | | Error message | | spinning | bool | | | Show spinner | | actions | array | [] | | Custom actions |

    ApBuilderFrame

    Props

    Name Type Default Description
    src string
    onLoad func
    onScriptError func
    globals object {}
    script string
    compile func (script) => script
    vr number
    id `ap-builder-frame-${uuid.v4()}`

    ApBuilderStyle

    Props

    Name Type Default Description
    style object {}
    highlightColor string ApStyle.DEFAULT_HIGHLIGHT_COLOR
    backgroundColor ApStyle.DEFAULT_BACKGROUND_COLOR

    ApBuilder

    Props

    Name Type Default Description
    html string ''
    script string ''
    globals object
    compile func
    onHtmlEdit func () => undefined
    onScriptEdit func () => undefined
    onScriptError func
    labels object {

    htmlTab: 'HTML', scriptTab: 'Script' } | | Labels | | errors | object | | | Errors | | htmlMode | string | 'htmlmixed' | | Codemirror mode for html | | scriptMode | string | 'javascript' | | Codemirror mode for script | | htmlActions | array | | | Custom actions for html editor | | scriptActions | array | | | Custom actions for script editor | | isSupported | func | function() { return /Chrome/.test(navigator.userAgent) } | | Check if supported |

    License

    This software is released under the MIT License.

    Links

    Install

    npm i apeman-react-builder

    DownloadsWeekly Downloads

    2

    Version

    3.0.4

    License

    MIT

    Last publish

    Collaborators

    • avatar