blockly-react-component
所属分类：代码编辑器
开发工具：TypeScript
文件大小：296KB
下载次数：0
上传日期：2021-04-23 09:43:29
上 传 者：
sh-1993
说明： React组件嵌入了Blockly可视化编程编辑器。
(A React component that embeds a Blockly visual programming editor.)
文件列表:
.editorconfig (147, 2021-04-23)
.eslintignore (53, 2021-04-23)
.eslintrc (668, 2021-04-23)
.prettierrc (197, 2021-04-23)
.travis.yml (41, 2021-04-23)
example (0, 2021-04-23)
example\package.json (1599, 2021-04-23)
example\public (0, 2021-04-23)
example\public\favicon.ico (3870, 2021-04-23)
example\public\index.html (1635, 2021-04-23)
example\public\manifest.json (320, 2021-04-23)
example\src (0, 2021-04-23)
example\src\App.test.tsx (241, 2021-04-23)
example\src\App.tsx (12031, 2021-04-23)
example\src\index.css (664, 2021-04-23)
example\src\index.tsx (164, 2021-04-23)
example\src\react-app-env.d.ts (40, 2021-04-23)
example\src\setupTests.ts (255, 2021-04-23)
example\tsconfig.json (834, 2021-04-23)
example\yarn.lock (477801, 2021-04-23)
package.json (2427, 2021-04-23)
src (0, 2021-04-23)
src\.eslintrc (36, 2021-04-23)
src\index.test.tsx (147, 2021-04-23)
src\index.tsx (2117, 2021-04-23)
src\react-app-env.d.ts (40, 2021-04-23)
src\typings.d.ts (465, 2021-04-23)
tsconfig.json (825, 2021-04-23)
tsconfig.test.json (87, 2021-04-23)
yarn.lock (528015, 2021-04-23)
# blockly-react-component
> A React component that embeds a Blockly visual programming editor.
[](https://www.npmjs.com/package/blockly-react-component) [](https://standardjs.com)
> Created with [create-react-library](https://github.com/transitive-bullshit/create-react-library).
## Install
```bash
npm install --save blockly-react-component
```
or
```bash
yarn add blockly-react-component
```
## Usage
```tsx
import React, { Component } from 'react'
import BlocklyComponent from 'blockly-react-component'
class Example extends Component {
render() {
return
}
}
```
## Properties
| Prop | Type | Description |
| ---- | ---- | ----------- |
| id | `string` | HTML id attribute for the blockly Div element. |
| locale | `string` | Blockly workspace locale, see https://github.com/google/blockly/tree/master/msg/js for available languages. Default locale is 'en'. *Since blockly uses a global namespace, you can not set different languages in multiple component instances.* |
| className | `string` | CSS class for the blockly Div element. |
| style | `React.CSSProperties` | CSS style properties for the blockly Div element. |
| initialXml | `string` | Initial Xml content for the blockly editor. |
| onWorkspaceChange | `(workspace?: Blockly.WorkspaceSvg) => void` | Do something when blockly workspace content changes. |
| ...blocklyOptions | any of `Blockly.BlocklyOptions` | Options for the blockly injection. See https://developers.google.com/blockly/guides/configure/web/configuration_struct for available options. *You can generate a toolbox xml from [Blockly Developer Tools](https://blockly-demo.appspot.com/static/demos/blockfactory/index.html) - Workspace Factory.* |
## Example
See the code on [example/src/App.tsx](https://github.com/alienzhangyw/blockly-react-component/blob/main/example/src/App.tsx). It uses a standard blockly built-in toolbox.
[Example Page](https://alienzhangyw.github.io/blockly-react-component/)
## License
MIT [alienzhangyw](https://github.com/alienzhangyw)
近期下载者：
相关文件：
收藏者：