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