### Install react-blockly using npm

Source: https://github.com/nbudin/react-blockly/blob/main/README.md

Installs the react-blockly library into your React project using the npm package manager. This command adds the library as a dependency in your `package.json` file.

```bash
npm install --save react-blockly
```

--------------------------------

### Install react-blockly using yarn

Source: https://github.com/nbudin/react-blockly/blob/main/README.md

Installs the react-blockly library into your React project using the yarn package manager. This command adds the library as a dependency in your `package.json` file.

```bash
yarn add react-blockly
```

--------------------------------

### Blockly JSON Serialization with BlocklyWorkspace Component

Source: https://context7.com/nbudin/react-blockly/llms.txt

This example demonstrates how to use the `BlocklyWorkspace` component from `react-blockly` to manage Blockly workspaces with JSON serialization. It shows how to define an initial workspace state using JSON, configure the toolbox, and handle changes in both JSON and XML formats. The component provides a streamlined way to embed and control Blockly editor instances, including setting up workspace configurations for grids and interaction.

```jsx
import React, { useState } from 'react';
import { BlocklyWorkspace } from 'react-blockly';

function JsonSerializationExample() {
  const [workspaceJson, setWorkspaceJson] = useState(null);
  const [workspaceXml, setWorkspaceXml] = useState(null);

  const initialJson = {
    blocks: {
      languageVersion: 0,
      blocks: [
        {
          type: 'text_print',
          id: 'sample_block',
          x: 100,
          y: 100,
          inputs: {
            TEXT: {
              shadow: {
                type: 'text',
                fields: {
                  TEXT: 'Hello, World!'
                }
              }
            }
          }
        }
      ]
    }
  };

  const toolbox = {
    kind: 'categoryToolbox',
    contents: [
      {
        kind: 'category',
        name: 'Text',
        contents: [
          { kind: 'block', type: 'text' },
          { kind: 'block', type: 'text_print' },
          { kind: 'block', type: 'text_join' }
        ]
      }
    ]
  };

  const handleJsonChange = (newJson) => {
    setWorkspaceJson(newJson);
    console.log('Workspace JSON updated:', JSON.stringify(newJson, null, 2));
  };

  const handleXmlChange = (newXml) => {
    setWorkspaceXml(newXml);
  };

  return (
    <div>
      <BlocklyWorkspace
        className="blockly-workspace"
        style={{ height: '500px', width: '800px' }}
        toolboxConfiguration={toolbox}
        initialJson={initialJson}
        workspaceConfiguration={{
          grid: { spacing: 20, length: 3, colour: '#ccc', snap: true }
        }}
        onJsonChange={handleJsonChange}
        onXmlChange={handleXmlChange}
      />
      <div style={{ marginTop: '20px' }}>
        <h3>JSON Output:</h3>
        <pre>{JSON.stringify(workspaceJson, null, 2)}</pre>
        <h3>XML Output:</h3>
        <pre>{workspaceXml}</pre>
      </div>
    </div>
  );
}

export default JsonSerializationExample;

```

--------------------------------

### React Blockly Workspace Lifecycle Example

Source: https://context7.com/nbudin/react-blockly/llms.txt

Demonstrates the integration of react-blockly with various workspace lifecycle callbacks including onInject, onWorkspaceChange, onDispose, and onImportError. It also shows how to add custom button callbacks and generate JavaScript code from the workspace.

```jsx
import React, { useRef, useCallback, useState } from 'react';
import { useBlocklyWorkspace } from 'react-blockly';
import { javascriptGenerator } from 'blockly/javascript';

function LifecycleExample() {
  const blocklyRef = useRef(null);
  const [logs, setLogs] = useState([]);
  const [code, setCode] = useState('');

  const addLog = (message) => {
    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
  };

  const handleInject = useCallback((workspace) => {
    addLog(`Workspace injected with ID: ${workspace.id}`);

    // Register custom button callbacks
    workspace.registerButtonCallback('runCode', () => {
      const generatedCode = javascriptGenerator.workspaceToCode(workspace);
      addLog('Code generation triggered');
      try {
        eval(generatedCode);
        addLog('Code executed successfully');
      } catch (error) {
        addLog(`Execution error: ${error.message}`);
      }
    });
  }, []);

  const handleWorkspaceChange = useCallback((workspace) => {
    const blockCount = workspace.getAllBlocks(false).length;
    addLog(`Workspace changed: ${blockCount} blocks`);

    // Generate code on every change
    const generatedCode = javascriptGenerator.workspaceToCode(workspace);
    setCode(generatedCode);
  }, []);

  const handleDispose = useCallback((workspace) => {
    addLog(`Workspace disposed: ${workspace.id}`);
    // Clean up any custom resources
  }, []);

  const handleImportError = useCallback((error) => {
    addLog(`Import error: ${error.message}`);
    console.error('XML/JSON import failed:', error);
  }, []);

  const toolbox = {
    kind: 'categoryToolbox',
    contents: [
      {
        kind: 'category',
        name: 'Actions',
        contents: [
          {
            kind: 'button',
            text: 'Run Code',
            callbackKey: 'runCode'
          }
        ]
      },
      {
        kind: 'category',
        name: 'Logic',
        contents: [
          { kind: 'block', type: 'controls_if' },
          { kind: 'block', type: 'controls_repeat_ext' }
        ]
      }
    ]
  };

  const { workspace } = useBlocklyWorkspace({
    ref: blocklyRef,
    toolboxConfiguration: toolbox,
    workspaceConfiguration: {
      grid: { spacing: 20, length: 3, colour: '#ccc', snap: true }
    },
    onInject: handleInject,
    onWorkspaceChange: handleWorkspaceChange,
    onDispose: handleDispose,
    onImportError: handleImportError
  });

  return (
    <div style={{ display: 'flex', height: '600px' }}>
      <div ref={blocklyRef} style={{ flex: 2, border: '1px solid #ddd' }} />
      <div style={{ flex: 1, padding: '10px', overflow: 'auto' }}>
        <h3>Generated Code:</h3>
        <pre style={{ background: '#f5f5f5', padding: '10px' }}>{code}</pre>
        <h3>Event Log:</h3>
        <ul style={{ fontSize: '12px' }}>
          {logs.map((log, idx) => (
            <li key={idx}>{log}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default LifecycleExample;

```

--------------------------------

### Configure Read-Only Blockly Workspace in React

Source: https://context7.com/nbudin/react-blockly/llms.txt

This snippet shows how to render a Blockly workspace in a read-only mode using the 'react-blockly' library. It prevents user modifications and is useful for displaying examples or tutorials. The configuration is done via the 'workspaceConfiguration' prop, setting 'readOnly' to true.

```jsx
import React from 'react';
import { BlocklyWorkspace } from 'react-blockly';

function ReadOnlyExample() {
  const exampleProgram = `
    <xml xmlns="https://developers.google.com/blockly/xml">
      <block type="text_print" x="100" y="100">
        <value name="TEXT">
          <shadow type="text">
            <field name="TEXT">This is a read-only example</field>
          </shadow>
        </value>
      </block>
      <block type="controls_repeat_ext" x="100" y="180">
        <value name="TIMES">
          <shadow type="math_number">
            <field name="NUM">5</field>
          </shadow>
        </value>
      </block>
    </xml>
  `;

  const toolbox = {
    kind: 'categoryToolbox',
    contents: [
      {
        kind: 'category',
        name: 'Text',
        contents: [
          { kind: 'block', type: 'text' },
          { kind: 'block', type: 'text_print' }
        ]
      },
      {
        kind: 'category',
        name: 'Loops',
        contents: [
          { kind: 'block', type: 'controls_repeat_ext' }
        ]
      }
    ]
  };

  return (
    <div>
      <h2>Example Program (Read-Only)</h2>
      <p>This workspace demonstrates a sample program. It cannot be modified.</p>
      <BlocklyWorkspace
        className="read-only-workspace"
        style={{ height: '400px', width: '100%', border: '2px solid #ccc' }}
        toolboxConfiguration={toolbox}
        initialXml={exampleProgram}
        workspaceConfiguration={{
          readOnly: true,
          grid: { spacing: 20, length: 3, colour: '#ccc', snap: false },
          zoom: { controls: true, wheel: true, startScale: 0.8 },
          trashcan: false
        }}
        onWorkspaceChange={(workspace) => {
          console.log('Workspace state:', workspace.getAllBlocks(false).length);
        }}
      />
    </div>
  );
}

export default ReadOnlyExample;

```

--------------------------------

### Embed Blockly Editor with BlocklyWorkspace Component

Source: https://context7.com/nbudin/react-blockly/llms.txt

Demonstrates how to use the BlocklyWorkspace component to embed a fully functional Blockly editor in a React application. It includes configuration for the toolbox, initial XML, workspace settings, and event handlers for code generation and XML changes. Dependencies include React and the react-blockly library.

```jsx
import React, { useState } from 'react';
import { BlocklyWorkspace } from 'react-blockly';

function MyBlocklyEditor() {
  const [xml, setXml] = useState('<xml xmlns="https://developers.google.com/blockly/xml"></xml>');
  const [generatedCode, setGeneratedCode] = useState('');

  const toolbox = {
    kind: 'categoryToolbox',
    contents: [
      {
        kind: 'category',
        name: 'Logic',
        contents: [
          { kind: 'block', type: 'controls_if' },
          { kind: 'block', type: 'logic_compare' }
        ]
      },
      {
        kind: 'category',
        name: 'Loops',
        contents: [
          { kind: 'block', type: 'controls_repeat_ext' },
          { kind: 'block', type: 'controls_whileUntil' }
        ]
      }
    ]
  };

  const handleWorkspaceChange = (workspace) => {
    // Generate JavaScript code from blocks
    const code = window.Blockly.JavaScript.workspaceToCode(workspace);
    setGeneratedCode(code);
  };

  return (
    <div>
      <BlocklyWorkspace
        className="blockly-editor"
        style={{ height: '600px', width: '100%' }}
        toolboxConfiguration={toolbox}
        initialXml={xml}
        workspaceConfiguration={{
          grid: {
            spacing: 20,
            length: 3,
            colour: '#ccc',
            snap: true
          },
          zoom: {
            controls: true,
            wheel: true,
            startScale: 1.0
          }
        }}
        onWorkspaceChange={handleWorkspaceChange}
        onXmlChange={setXml}
      />
      <pre>{generatedCode}</pre>
    </div>
  );
}

export default MyBlocklyEditor;

```

--------------------------------

### Embed Blockly using BlocklyWorkspace Component

Source: https://github.com/nbudin/react-blockly/blob/main/README.md

Demonstrates how to use the `BlocklyWorkspace` component to embed Blockly into a React application. It includes setting up initial XML and handling XML changes via a callback. Requires React 16.8+.

```jsx
import { BlocklyWorkspace } from 'react-blockly';

function MyBlocklyEditor() {
  const [xml, setXml] = useState();

  return (
    <BlocklyWorkspace
      className="width-100" // 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}
    />
  )
}
```

--------------------------------

### React Blockly Dynamic Toolbox Configuration

Source: https://context7.com/nbudin/react-blockly/llms.txt

This React component configures a Blockly workspace with a dynamically changing toolbox. It uses state to manage the difficulty level, which in turn determines the available blocks. The `BlocklyWorkspace` component from `react-blockly` is used, and its `toolboxConfiguration` prop is updated based on the selected difficulty.

```jsx
import React, { useState, useCallback } from 'react';
import { BlocklyWorkspace } from 'react-blockly';

function DynamicToolboxExample() {
  const [difficulty, setDifficulty] = useState('beginner');
  const [xml, setXml] = useState('');

  const getToolbox = (level) => {
    const beginner = {
      kind: 'categoryToolbox',
      contents: [
        {
          kind: 'category',
          name: 'Basic Blocks',
          contents: [
            { kind: 'block', type: 'text_print' },
            { kind: 'block', type: 'math_number' }
          ]
        }
      ]
    };

    const intermediate = {
      kind: 'categoryToolbox',
      contents: [
        ...beginner.contents,
        {
          kind: 'category',
          name: 'Logic',
          contents: [
            { kind: 'block', type: 'controls_if' },
            { kind: 'block', type: 'logic_compare' }
          ]
        }
      ]
    };

    const advanced = {
      kind: 'categoryToolbox',
      contents: [
        ...intermediate.contents,
        {
          kind: 'category',
          name: 'Functions',
          contents: [
            { kind: 'block', type: 'procedures_defnoreturn' },
            { kind: 'block', type: 'procedures_callnoreturn' }
          ]
        },
        {
          kind: 'category',
          name: 'Variables',
          custom: 'VARIABLE'
        }
      ]
    };

    return level === 'beginner' ? beginner
         : level === 'intermediate' ? intermediate
         : advanced;
  };

  const handleImportError = useCallback((error) => {
    console.error('Failed to import workspace:', error);
    alert('Error loading workspace: ' + error.message);
  }, []);

  return (
    <div>
      <div style={{ padding: '10px' }}>
        <label>Difficulty: </label>
        <select value={difficulty} onChange={(e) => setDifficulty(e.target.value)}>
          <option value="beginner">Beginner</option>
          <option value="intermediate">Intermediate</option>
          <option value="advanced">Advanced</option>
        </select>
      </div>
      <BlocklyWorkspace
        key={difficulty}
        className="blockly-editor"
        style={{ height: '600px', width: '100%' }}
        toolboxConfiguration={getToolbox(difficulty)}
        initialXml={xml}
        workspaceConfiguration={{
          grid: { spacing: 20, length: 3, colour: '#ccc', snap: true },
          zoom: { controls: true, wheel: true }
        }}
        onXmlChange={setXml}
        onImportError={handleImportError}
      />
    </div>
  );
}

export default DynamicToolboxExample;

```

--------------------------------

### Use Blockly Workspace Hook for Custom React Integration

Source: https://context7.com/nbudin/react-blockly/llms.txt

The `useBlocklyWorkspace` hook allows for custom integration of Blockly into a React application. It injects a Blockly workspace into a specified DOM element, providing the workspace instance and debounced XML/JSON representations. This hook is useful for scenarios requiring custom DOM structures or advanced control over rendering. It accepts configurations for the toolbox, initial workspace state, and workspace behavior, along with callbacks for workspace events like injection, disposal, and changes.

```jsx
import React, { useRef, useState, useCallback } from 'react';
import { useBlocklyWorkspace } from 'react-blockly';
import * as Blockly from 'blockly/core';

function CustomBlocklyEditor() {
  const blocklyRef = useRef(null);
  const [savedXml, setSavedXml] = useState(null);

  const toolbox = {
    kind: 'flyoutToolbox',
    contents: [
      { kind: 'block', type: 'text' },
      { kind: 'block', type: 'text_print' },
      { kind: 'block', type: 'math_number' },
      { kind: 'block', type: 'math_arithmetic' }
    ]
  };

  const handleInject = useCallback((workspace) => {
    console.log('Workspace injected:', workspace.id);
    // Add custom plugins or configurations here
  }, []);

  const handleDispose = useCallback((workspace) => {
    console.log('Workspace disposed:', workspace.id);
    // Cleanup custom plugins
  }, []);

  const handleWorkspaceChange = useCallback((workspace) => {
    const blockCount = workspace.getAllBlocks(false).length;
    console.log('Current blocks:', blockCount);
  }, []);

  const { workspace, xml, json } = useBlocklyWorkspace({
    ref: blocklyRef,
    toolboxConfiguration: toolbox,
    initialXml: savedXml,
    workspaceConfiguration: {
      grid: {
        spacing: 25,
        length: 5,
        colour: '#888',
        snap: true
      },
      move: {
        scrollbars: true,
        drag: true,
        wheel: true
      }
    },
    onInject: handleInject,
    onDispose: handleDispose,
    onWorkspaceChange: handleWorkspaceChange
  });

  const saveWorkspace = () => {
    if (xml) {
      localStorage.setItem('blockly-workspace', xml);
      alert('Workspace saved!');
    }
  };

  const loadWorkspace = () => {
    const loaded = localStorage.getItem('blockly-blockly-workspace');
    if (loaded) {
      setSavedXml(loaded);
    }
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div style={{ padding: '10px' }}>
        <button onClick={saveWorkspace}>Save Workspace</button>
        <button onClick={loadWorkspace}>Load Workspace</button>
      </div>
      <div
        ref={blocklyRef}
        style={{ flexGrow: 1, border: '1px solid #ddd' }}
      />
    </div>
  );
}

export default CustomBlocklyEditor;

```

--------------------------------

### Embed Blockly using useBlocklyWorkspace Hook

Source: https://github.com/nbudin/react-blockly/blob/main/README.md

Illustrates how to use the `useBlocklyWorkspace` hook to inject a Blockly workspace into a custom DOM element within a React component. This approach offers more control over Blockly's rendering. Requires React 16.8+.

```jsx
import { useBlocklyWorkspace } from 'react-blockly';

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.