react-blockly-playground's Introduction

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
  )
}

Recommend Projects