react-obf
react-obf is an Open Board Format renderer.
Features
- Supports OBF natively
- Full control over button rendering
- Grid size
- Grid order
- LTR / RTL direction,
- Scanning mode
Install
npm install --save react-obf
Basic Usage
import React Component from 'react';import Board Tile from 'react-obf'; import boardSet from './communikate-20.json'; state = board: boardSetboardsboardSetroot ; { const utterance = text; windowspeechSynthesis; } { this; }; { return <Tile />; } { return <Board = = = = /> ; }
Props
Prop | Type | Required | Description |
---|---|---|---|
backspaceButton |
Object | Component to render output backspace button. | |
board |
Object | ✓ | Board to display, needs to be Open Board Format compliant. |
clearButton |
Object | Component to render output clear button. | |
dir |
String | Board direction, one of: ltr , rtl . |
|
navbar |
Object | Component to render navigation bar. | |
onLoadBoard |
Function | Callback, fired when requesting to load board. | |
onOutputChange |
Function | Callback, fired when output changes. | |
onPlaySound |
Function | Callback, fired when requesting to play sound. | |
onSpeak |
Function | Callback, fired when requesting to speak. | |
output |
Array | Output to display. | |
outputHidden |
Boolean | When true , output is hidden. |
|
renderButton |
Function | ✓ | Board button renderer |
scanInterval |
Number | Sets the scan rate interval when scanning is true . |
|
scanning |
Boolean | When true , scanner is activated. |
|
size |
String | UI size. | |
toolbar |
Object | Component to render toolbar. |
backspaceButton (optional)
board (required)
clearButton (optional)
dir (optional)
navbar (optional)
onLoadBoard (optional)
onOutputChange (optional)
onPlaySound (optional)
onSpeak (optional)
output (optional)
renderButton (required)
scanInterval (optional)
scanning (optional)
size (optional)
toolbar (optional)
License
MIT