react-blockly-playground

A React Wrapper for using Blockly, the visual programming editor from Google I wrote react-blockly-playground for an internal platform at Tekie to cater student's curriculum activity.

Features:

• Provides a hook as well as a function component for ease of use + flexibility
• Supports the JSON toolbox format
• Automatically propagates prop updates to Blockly
• Provides callbacks for workspace injection, disposal, changes, and XML import errors
• Automatically generates workspace XML, debounced for performance

Installation

To add react-blockly to a React app that uses npm, run:

npm install --save react-blockly-playground

How to use

You can use react-blockly as either a component or a hook.

As component

Write import { BlocklyWorkspace } from 'react-blockly-playground'; in your code and use BlocklyWorkspace as a component.

Example:

import { BlocklyWorkspace } from 'react-blockly';

function MyBlocklyEditor() {
  const [xml, setXml] = useState();

  return (
    <BlocklyWorkspace
      useDefaultToolbox
      customTools={[tool1]}
      toolboxConfiguration={MY_TOOLBOX} // this must be a JSON toolbox definition
      workspaceConfiguration={WORKSPACE_CONFIGURATION}
      initialXml={xml}
      onXmlChange={setXml}
      onWorkspaceChange={(workspace) => {}}
      onInject={(e) => {}}
      customTheme={Blockly.Theme.Playground}
      blocklyKey='One'
    />
  )
}

Using the hook

Write import { useBlocklyWorkspace } from 'react-blockly-playground'; in your code and use this hook to inject a Blockly workspace into your rendered components.

Example:

import { useBlocklyWorkspace } from 'react-blockly-playground';

function MyBlocklyHookEmbed() {
  const blocklyRef = useRef(null);
  const { workspace, xml } = useBlocklyWorkspace({
    ref: blocklyRef,
    toolboxConfiguration: MY_TOOLBOX, // this must be a JSON toolbox definition
    initialXml: xml,
  });

  return (
    <div ref={blocklyRef} /> // Blockly will be injected here
  )
}