https://github.com/smithg09/react-blockly-playground
React Wrapper for Google's Blockly Library
https://github.com/smithg09/react-blockly-playground
Last synced: 2 months ago
JSON representation
React Wrapper for Google's Blockly Library
- Host: GitHub
- URL: https://github.com/smithg09/react-blockly-playground
- Owner: smithg09
- Created: 2023-07-31T12:45:29.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-31T12:46:46.000Z (almost 2 years ago)
- Last Synced: 2025-03-13T09:51:20.222Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 207 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-blockly-playground
[](https://github.com/google/blockly)
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:
```bash
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:
```jsx
import { BlocklyWorkspace } from 'react-blockly';
function MyBlocklyEditor() {
const [xml, setXml] = useState();
return (
{}}
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:
```jsx
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 (
// Blockly will be injected here
)
}
```