ntcore-react v2.0.3

Quickly connect your React App to NetworkTables.

⚡️ Quick start

First, create your app using your favorite bundler (Vite is a great option if you don't have a preference. All of the example code here will be assuming you're using vite)

npm create vite
# yarn create vite

Follow the steps for project creation in the command line, then after your dependencies are installed, run the following command to install ntcore-react.

npm install ntcore-react ntcore-ts-client
# yarn add ntcore-react ntcore-ts-client

Usage

Wrap the top level of your app with a NTProvider element.

import { NTProvider } from "ntcore-react";

function App() {
    return (
        <NTProvider teamNumber={5712}>
            {/** Everything else for your app here */}
        </NTProvider>
    );
}

The NTProvider component supports using either a team number or a uri to connect with.

Getting NetworkTable Values

There are 2 different hooks provided for getting values from your robot.

useNTValue()

Returns the value at the provided key, with live updates whenver it changes.

import { NetworkTableTypeInfos } from "ntcore-ts-client";
import { useNTValue } from "ntcore-react";

const YourComponent = () => {
    const intakeExtended = useNTValue<boolean>(
        "/Intake/extended",
        NetworkTableTypeInfos.kBoolean,
        false
    );

    return <div>Intake Extended: {intakeExtended}</div>;
};

This has a few required parameters to work.

useNTState()

Returns the value at the provided key, with live updates whenver it changes. Also gives access to modify values, allowing you to talk to the robot over NetworkTables.

import { NetworkTableTypeInfos } from "ntcore-ts-client";
import { useNTState } from "ntcore-react";

const YourComponent = () => {
    const [ledColors, setColors] = useNTState<boolean>(
        "/LED/color",
        NetworkTableTypeInfos.kString,
        "#ffffff"
    );

    const setColorsToRed = () => {
        setColors("#ff0000");
    };

    const setColorsToBlue = () => {
        setColors("#0000ff");
    };

    return (
        <div>
            <div style={{ backgroundColor: ledColors }}>LEDs</div>
            <button onClick={setColorsToRed}>Red LEDS</button>
            <button onClick={setColorsToBlue}>Blue LEDS</button>
        </div>
    );
};

This has a few required parameters to work.