NT4 React

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 { NetworkTablesTypeInfos } from "ntcore-ts-client";
import { useNTValue } from "ntcore-react";

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

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

This has a few required parameters to work.

Parameter	Type	Description
key	string	The key in NetworkTables to track the value from
ntType	NetworkTablesTypeInfo	The native type of the value in the table
defaultValue	NTTopicTypes	The default value, used before the value is retrieved. Also will handle typing usually (although not for strings, which is just assumes the type will be what the value is.

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 { NetworkTablesTypeInfos } from "ntcore-ts-client";
import { useNTState } from "ntcore-react";

const YourComponent = () => {
    const [ledColors, setColors] = useNTState<boolean>(
        "/LED/color",
        NetworkTablesTypeInfos.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.

Parameter	Type	Description
key	string	The key in NetworkTables to track the value from
ntType	NetworkTablesTypeInfo	The native type of the value in the table
defaultValue	NTTopicTypes	The default value, used before the value is retrieved. Also will handle typing usually (although not for strings, which is just assumes the type will be what the value is.