Reac blockly workspace not loading
Eleftheria-99 opened this issue · comments
Hello,
I have a react app using typescript and vite where I want to use the react-blockly package in order to load blockly wrokspace. The blockly div exists if I open the dev tools, but in my page it wont show up at all.
My code :
import { BlocklyWorkspace } from 'react-blockly';
import { useState } from 'react';
import "./blockly.css";
const MY_TOOLBOX = {
"kind": "categoryToolbox",
"contents": [
{
"kind": "category",
"name": "Logic",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "logic_compare"
}
]
}
]
}
const BlocklyEditorComponent = () => {
const [xml, setXml] = useState('<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>');
return (
<BlocklyWorkspace
className="width-100 fill-height" // you can use whatever classes are appropriate for your app's CSS
toolboxConfiguration={MY_TOOLBOX} // this must be a JSON toolbox definition
initialXml={xml}
onXmlChange={setXml}
/>
)
}
export default BlocklyEditorComponent;
Any ideas what is wrong ?
Solution found :
Blockly component should be lazy loaded in order to have the correct size.
Blockly must have height : 30rem and width: 100%