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