1.0.2 • Published 3 years ago
blockly-react-component v1.0.2
blockly-react-component
A React component that embeds a Blockly visual programming editor.
Created with create-react-library.
Install
npm install --save blockly-react-componentor
yarn add blockly-react-componentUsage
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.
License
MIT © alienzhangyw