apeman-react-builder

apeman react package for builder components.


Keywords
apeman, React, react-component
License
MIT
Install
npm install apeman-react-builder@3.0.1

Documentation

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