react-blocks-editor

Embed the Blocks Editor anywhere using a React component.

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.