react-blocks-editor
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    react-blocks-editor

    Embed the Blocks Editor anywhere using a React component.

    NPM JavaScript Style Guide

    Install

    npm install --save react-blocks-editor

    Quick Start

    import React from 'react'
    import ReactDOM from 'react-dom'
    import BlocksEditor from 'react-blocks-editor'
    
    ReactDOM.render(
      <BlocksEditor />,
      document.getElementById('root'),
    )

    Advanced Usage

    import React from 'react'
    import { BlocksEditor, EditorState } from 'react-blocks-editor'
    
    const App = () => {
    
      // Called whenever the user changes (or manually saves) the editor state
      const handleSave = (state: EditorState) => {
        console.log('Editor state:', state)
      }
    
      return (
        <BlocksEditor
          style={{ height: '100vh' }}
          options={{
            theme: 'dark',
            menu: 'hidden',
            tutorial: 'hello-world'
          }}
          onSave={handleSave}>
    
          {({ loadState }) => {
            console.log('Loaded editor iframe.')
    
            // Load a specific project state (.blocks JSON format).
            loadState({
              name: 'Project name',
              description: 'Project description',
              nodes: {
                // Text block
                'message': {
                  type: 'LiteralText',
                  position: [0, 0],
                  data: {
                    value: 'Hello world!'
                  },
                  outputs: {
                    value: [{
                      // Reference to 'motoko' node and 'value' input socket
                      node: 'motoko',
                      input: 'input'
                    }]
                  }
                },
                // Motoko compiler block
                'motoko': {
                  type: 'CompileMotoko',
                  position: [250, 0]
                }
              }
            })
          }}
        </BlocksEditor>
      )
    }
    
    export default App

    This project was made possible via the DFINITY Developer Grant Program.

    Install

    npm i react-blocks-editor

    DownloadsWeekly Downloads

    11

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    124 kB

    Total Files

    9

    Last publish

    Collaborators

    • rvanasa