bc-keyboard

React keyboard component styled with B.C. Design System styles.

Install

npm i @ty2k/bc-keyboard

Use

// This library assumes you are importing
// the BC Sans font in your own app code.
//
// It doesn't re-ship the font itself to make
// sure you don't double-ship it by accident.
import "@bcgov/bc-sans/css/BC_Sans.css";

// ...

import { useState } from "react";
import { Keyboard, keyboards } from "@ty2k/bc-keyboard";

function App() {
  const [text, setText] = useState<string>("");

  function handlePress(k: Key) {
    if (typeof k === "string") return setText(text + k);
    if (k.v) return setText(text + k.v);
    return setText(text + k.k);
  }

  function handleBackspace() {
    if (text.length === 0) return;

    return setText(text.substring(0, text.length - 1));
  }

  function handleClear() {
    setText("");
  }

  return <Keyboard handlePress={handlePress} rows={keyboards.bcSans} />;
}