A React component to play with Blockly.
A React component to play with Blockly.
$ npm install react-blockly-drawer node-blockly --save
import React from 'react';
import ReactDOM from 'react-dom';
import Blockly from 'node-blockly/browser';
import BlocklyDrawer, { Block, Category } from 'react-blockly-drawer';
const helloWorld = {
name: 'HelloWorld',
category: 'Demo',
block: {
init: function () {
this.jsonInit({
message0: 'Hello %1',
args0: [
{
type: 'field_input',
name: 'NAME',
check: 'String',
},
],
output: 'String',
colour: 160,
tooltip: 'Says Hello',
});
},
},
generator: (block) => {
const message = `'${block.getFieldValue('NAME')}'` || '\'\'';
const code = `console.log('Hello ${message}')`;
return [code, Blockly.JavaScript.ORDER_MEMBER];
},
};
ReactDOM.render(
<BlocklyDrawer
tools={[helloWorld]}
onChange={(code, workspace) => {
console.log(code, workspace);
}}
language={Blockly.JavaScript}
appearance={
{
categories: {
Demo: {
colour: '270'
},
},
}
}
>
<Category name="Variables" custom="VARIABLE" />
<Category name="Values">
<Block type="math_number" />
<Block type="text" />
</Category>
</BlocklyDrawer>,
document.getElementById('root')
);
Event listener to the workspace change. Two arguments are passed to this callback:
code
is the generated code of your created program (see the propertylanguage
);workspaceXML
is an XML text that corresponds to the content of the workspace.
A language generator, either one of the languages described in the
Blockly documentation on code generation or
a custom object with method workspaceToCode
. Default generator is
Blockly.Javascript
. If language
is set to null
, no code is generated and
the first argument passed to the onChange
function, code
will be null
.
Blockly predefined blocks/tools can be passed as children of this component. For example, the following content could be passed.
<Category name="Variables" custom="VARIABLE" />
<Category name="Values">
<Block type="math_number" />
<Block type="text" />
</Category>
Workspace XML initial content. It is no necessary to pass it if you want a new/empty workspace.
Options for the workspace. See blocklyDocumentation for details.
Options for styling.
In order to style the block categories an object containing the categories
property should be passed. This property categories is an object that has
the categories names as keys and the values contain the styling properties for that block category.
For example:
{
categories: {
Demo: {
colour: '270'
},
},
}
This way the category Demo
is colored.
See blocklyDocumentation for block categories styling. for details.
Component's class
Component's style
An array of your custom block/tools. Each item should have the following properties:
-
It is the name of the block/tool.
-
The category where this block/tool is going to be inside of.
-
Block's definition as it is done in Blockly.
-
Generator's definition as it is done in Blockly.
For example:
{
name: 'HelloWorld',
category: 'Demo',
block: {
init: function () {
this.jsonInit({
message0: 'Hello %1',
args0: [
{
type: 'field_input',
name: 'NAME',
check: 'String',
},
],
output: 'String',
colour: 160,
tooltip: 'Says Hello',
});
},
},
generator: (block) => {
const message = `'${block.getFieldValue('NAME')}'` || '\'\'';
const code = `console.log('Hello ${message}')`;
return [code, Blockly.JavaScript.ORDER_MEMBER];
},
}
git clone git@github.com:xvicmanx/react-blockly-drawer.git
npm test
npm run build
See CONTRIBUTING.md
- node-blockly: Blockly for Node.js and Browser as CommonJS module
- prop-types: Runtime type checking for React props and similar objects.
- react: React is a JavaScript library for building user interfaces.
Feel free to make any suggestion to improve this component.