react-blocks-editor

Embed the Blocks Editor anywhere using a React component.

Install

npm install --save react-blocks-editor

Quick Start

importReactfrom'react'importReactDOMfrom'react-dom'importBlocksEditorfrom'react-blocks-editor'ReactDOM.render(<BlocksEditor/>,document.getElementById('root'),)

Advanced Usage

importReactfrom'react'import{BlocksEditor,EditorState}from'react-blocks-editor'constApp=()=>{// Called whenever the user changes (or manually saves) the editor stateconsthandleSave=(state: EditorState)=>{console.log('Editor state:',state)}return(<BlocksEditorstyle={{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 socketnode: 'motoko',input: 'input'}]}},// Motoko compiler block'motoko': {type: 'CompileMotoko',position: [250,0]}}})}}</BlocksEditor>)}exportdefaultApp

---

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