React-obf NPM | npm.io

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.