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
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.
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. |