thehandy-react

TheHandyReact - React utilities for working with The Handy

Installation

npm i thehandy-react

Getting Started

thehandy uses React Context to ensure that a single instance of the Handy class can be accessed by all components. So you'll need to add this provider to the root of your app.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { HandyProvider } from "thehandy";

ReactDOM.render(
    <HandyProvider>
        <App />
    </HandyProvider>,
    document.getElementById("root")
);

export default App;

Now, you can access various features of the Handy using the useHandy hook

import React from "react";
import useHandy from "thehandy";

const App = () => {
  const {connectionKey, connect, sendMode, sendHampStart, sendHampStop, sendHampVelocity} = useHandy();

  return (
    <p>Connection key is {connectionKey}</p>
    <input onChange={e => connect(e.target.value)} />
    <button onClick={() => sendMode(0)}>Set HAMP</button>
    <button onClick={() => sendHampStart()}>Start HAMP</button>
    <button onClick={() => sendHampStop()}>Stop HAMP</button>
    <button onClick={() => sendHampVelocity(Math.random() * 100)}>Randomize Speed</button>
  )
}

export default App;

Note that this package attempts to keep track of the Handy's state in the handyState property of the useHandy hook. This is generally pretty accurate, but is not guaranteed to be so, since the Handy's state can be changed by the user, or by other applications, without this library knowing about it. So bear that in mind if you rely on handyState for your application's logic.

Handy API Reference

See the documentation for my base package thehandy for information on how to send and receive information from a Handy device. Note that the functions that begin with 'set' are instead prefixed with 'send' in the react wrapper, to avoid confusion with setter functions in useState hooks.