Neglected Pizza Money

    thehandy-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    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.

    Install

    npm i thehandy-react

    DownloadsWeekly Downloads

    2

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    15

    Last publish

    Collaborators

    • defucilis