blockly-react-component

A React component that embeds a Blockly visual programming editor.

Created with create-react-library.

Install

npm install --save blockly-react-component

or

yarn add blockly-react-component

Usage

import React, { Component } from 'react'

import BlocklyComponent from 'blockly-react-component'

class Example extends Component {
  render() {
    return <BlocklyComponent />
  }
}

Properties

| Prop | Type | Description | | ---- | ---- | ----------- | | id | string | HTML id attribute for the blockly Div element. | | locale | string | Blockly workspace locale, see https://github.com/google/blockly/tree/master/msg/js for available languages. Default locale is 'en'. Since blockly uses a global namespace, you can not set different languages in multiple component instances. | | className | string | CSS class for the blockly Div element. | | style | React.CSSProperties | CSS style properties for the blockly Div element. | | initialXml | string | Initial Xml content for the blockly editor. | | onWorkspaceChange | (workspace?: Blockly.WorkspaceSvg) => void | Do something when blockly workspace content changes. | | ...blocklyOptions | any of Blockly.BlocklyOptions | Options for the blockly injection. See https://developers.google.com/blockly/guides/configure/web/configuration_struct for available options. You can generate a toolbox xml from Blockly Developer Tools - Workspace Factory. |

Example

See the code on example/src/App.tsx. It uses a standard blockly built-in toolbox.

Example Page

License

MIT © alienzhangyw