scratchblocks-react

Render scratchblocks in React!

Installation

npm install scratchblocks scratchblocks-react
# or
yarn add scratchblocks scratchblocks-react

Note that in addition to the scratchblocks-react package, you must have scratchblocks installed (and react).

Usage

Simple

importScratchBlocksfrom"scratchblocks-react"functionMyComponent(){return(<ScratchBlocksblockStyle="scratch3">{` when green flag clicked forever move (10) steps end `}</ScratchBlocks>)}

Dynamic

In this example, the user can edit the Scratch code.

importScratchBlocksfrom"scratchblocks-react"functionMyComponent(){const[code,setCode]=useState("move (10) steps")return(<div><textareavalue={code}onChange={(event)=>setCode(event.target.value)}/><ScratchBlocksblockStyle="scratch3">{code}</ScratchBlocks></div>)}

Non-English Languages

importScratchBlocksfrom"scratchblocks-react"// Load some extra languages (English comes loaded by default)importscratchblocksfrom"scratchblocks"importesfrom"scratchblocks/locales/es.json"// Spanishimportdefrom"scratchblocks/locales/de.json"// German// Register the language files with scratchblocksscratchblocks.loadLanguages({ es, de })functionMyComponent(){return(<ScratchBlocksblockStyle="scratch3"languages={["en","es","de"]}// Choose which languages to allow>{` when green flag clicked por siempre gehe (10) er Schritt fin `}</ScratchBlocks>)}

Available Props

Name	Default	Valid Values	Description
blockStyle	"scratch2"	"scratch2" or "scratch3"	Changes the visual style of the rendered blocks.
languages	["en"]	An array of language codes such as ["en", "de"]	Enables the use of non-english languages. Requires additional setup.
... and more!			All other props (such as "className" and "style") will be passed directly to the div.