A React component for embedding Blockly

[Nat Budin]

Hi everyone, and happy holidays!

I work at PatientsLikeMe, and we've started to use Blockly for some internal administration tools that allow site admins to build custom business logic.  We'll be releasing some reusable components that result from this work, and this is the first of them.

react-blockly-component is a React.js component that embeds a Blockly editor, with full control over its toolbox through props.  This means the editor can be embedded by another React component, which may set the content of the editor's toolbox dynamically based on its own logic.  Blockly will be notified automatically.

The component is released under the MIT license and can be found at: https://github.com/patientslikeme/react-blockly-component

I'd welcome feedback, suggestions, or questions about this component.  Thanks!

[Stefan Melbinger]

Hi Nat,

I'm glad that somebody is working on this! :) I've been working on a simpler component myself, feel free to look at https://github.com/melbings/ariadne/blob/master/src/app/js/Components/BlocklyComponent.js for further inspiration.

Have you been thinking about how custom blocks would be defined and integrated into your Blockly component?

Best,
Stefan

[Nat Budin]

Hi Stefan, nice to meet you, and glad to see others are also thinking about how to integrate Blockly and React!

We do use a good number of custom blocks in our app.  This is fairly easy to do with the component I released, since it allows customizing the toolbox - just add whatever block configurations you want to make available.

I see that in your component you do some of the global Blockly configuration from the component itself.  We've avoided doing this, and instead do it separately from a different JS file, which is where we register our custom blocks as well.  Having it separate allows us to have multiple Blockly instances on the same page (which we switch between using tabs).

Nat

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/GakDk2F9_aU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Prabjyot Singh Sudan]

hey, I am working on creating a dynamic toolbox using react-blockly-component but I am having trouble understand how to go about it. I know the basics of blockly but still trying to understand the dynamic side of things with react and also how to add multiple instance of blockly on the same page. Could you point me to some resource or anything where I can get started on this? Thanks!

On Sunday, 27 December 2015 05:54:25 UTC+5:30, Nat Budin wrote:

Hi Stefan, nice to meet you, and glad to see others are also thinking about how to integrate Blockly and React!

We do use a good number of custom blocks in our app.  This is fairly easy to do with the component I released, since it allows customizing the toolbox - just add whatever block configurations you want to make available.

I see that in your component you do some of the global Blockly configuration from the component itself.  We've avoided doing this, and instead do it separately from a different JS file, which is where we register our custom blocks as well.  Having it separate allows us to have multiple Blockly instances on the same page (which we switch between using tabs).

Nat

On Dec 26, 2015, at 5:15 AM, Stefan Melbinger <stefan....@gmail.com> wrote:

Hi Nat,

I'm glad that somebody is working on this! :) I've been working on a simpler component myself, feel free to look at https://github.com/melbings/ariadne/blob/master/src/app/js/Components/BlocklyComponent.js for further inspiration.

Have you been thinking about how custom blocks would be defined and integrated into your Blockly component?

Best,
Stefan

On Thursday, 24 December 2015 18:00:34 UTC+1, Nat Budin wrote:

Hi everyone, and happy holidays!

I work at PatientsLikeMe, and we've started to use Blockly for some internal administration tools that allow site admins to build custom business logic.  We'll be releasing some reusable components that result from this work, and this is the first of them.

react-blockly-component is a React.js component that embeds a Blockly editor, with full control over its toolbox through props.  This means the editor can be embedded by another React component, which may set the content of the editor's toolbox dynamically based on its own logic.  Blockly will be notified automatically.

The component is released under the MIT license and can be found at: https://github.com/patientslikeme/react-blockly-component

I'd welcome feedback, suggestions, or questions about this component.  Thanks!

--
You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/GakDk2F9_aU/unsubscribe.

To unsubscribe from this group and all its topics, send an email to blo...@googlegroups.com.

[Beka Westberg]

Hello,

Dynamic toolboxes (or categories rather) actually have an API that may be useful to you. That doesn't really have anything to do with react but I believe it is the recommended method for changing the available blocks.

For adding multiple Blockly instances to the same page, you just call Blockly.inject multiple times (at least on a non-react-y page). You can check out the multi_playground for an example. As for things specific to react I don't really have any advice :/

I hope that gives you a place to start!

Beka