apeman-react-builder

apeman react package for builder components.

Usage no npm install needed!

<script type="module">
  import apemanReactBuilder from 'https://cdn.skypack.dev/apeman-react-builder';
</script>

README

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
mode string
error string object
spinning bool
actions array []

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
htmlMode string 'htmlmixed'
scriptMode string 'javascript'
htmlActions array
scriptActions array
isSupported func function() {
return /Chrome/.test(navigator.userAgent)
} Check if supported

License

This software is released under the MIT License.

Links