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';

class Example extends Component {
  state = {
    board: boardSet.boards[boardSet.root]
  };

  speak(text) {
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  }

  loadBoard = board => {
    this.setState({ board: boardSet.boards[board.id] });
  };

  renderButton(button) {
    return <Tile {...button} />;
  }

  render() {
    return (
      <Board
        board={this.state.board}
        onLoadBoard={this.loadBoard}
        onSpeak={this.speak}
        renderButton={this.renderButton}
      />
    );
  }
}

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