Skip to content

cboard-org/react-obf

Repository files navigation

react-obf

react-obf is an Open Board Format renderer.

NPM

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