0.0.2 • Published 4 years ago
react-open-board-format v0.0.2
react-open-board-format
React library for building Open Board Format AAC applications.
The library provides a set of components and hooks:
<Board />
<NavBar />
<Output />
useBoard
useNavigation
useOutput
Installation
React Open Board Format is available as an npm package
npm i react-open-board-format
Basic Usage
import React from "react";
import { BoardPlayer, useBoard } from "react-open-board-format";
import boardSet from "./obf/example-boardset.json";
function play(url) {
const audio = new Audio(url);
audio.play();
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}
const deps = { play, speak };
function BasicExample(props) {
const { board, handleButtonClick, handleOutputClick, nav, output } = useBoard(
boardSet,
deps
);
return (
<BoardPlayer
buttons={board.buttons}
grid={board.grid}
name={board.name}
nav={nav}
output={output}
onButtonClick={handleButtonClick}
onOutputClick={handleOutputClick}
/>
);
}
Advanced Usage
import React from "react";
import {
Board,
NavBar,
Output,
Pictogram,
Tile,
useBoard
} from "react-open-board-format";
import boardSet from "./obf/example-boardset.json";
function play(url) {
const audio = new Audio(url);
audio.play();
}
function speak(text) {
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.cancel();
window.speechSynthesis.speak(utterance);
}
const deps = { play, speak };
function AdvancedExample(props) {
const { board, handleButtonClick, nav, output } = useBoard(boardSet, deps);
function renderOutputValue(value) {
return <Pictogram label={value.label} src={value.image} />;
}
function renderBoardButton(button) {
const variant = button.load_board ? "folder" : "button";
const id = `${board.id}-${button.id}`;
return (
<Tile
backgroundColor={button.background_color}
borderColor={button.border_color}
key={id}
onClick={() => handleButtonClick(button)}
variant={variant}
>
<Pictogram label={button.label} src={button.image} />
</Tile>
);
}
return (
<div>
<Output
values={output.values}
renderValue={renderOutputValue}
onBackspaceClick={output.pop}
onClearClick={output.clear}
/>
<NavBar
backDisabled={nav.backDisabled}
forwardDisabled={nav.forwardDisabled}
onBackClick={nav.goBack}
onForwardClick={nav.goForward}
title={board.name}
/>
<Board
buttons={board.buttons}
grid={board.grid}
renderButton={renderBoardButton}
/>
</div>
);
}
Changelog
Recently Updated? Please read the changelog.
Roadmap
The future plans and high priority features and enhancements can be found in the roadmap file.
License
This project is licensed under the terms of the MIT license.