https://github.com/crispybacon1999/ntcore-react
Quickly connect your React App to NetworkTables
https://github.com/crispybacon1999/ntcore-react
driver-station frc frc-dashboard networktables react
Last synced: 4 months ago
JSON representation
Quickly connect your React App to NetworkTables
- Host: GitHub
- URL: https://github.com/crispybacon1999/ntcore-react
- Owner: CrispyBacon1999
- License: mit-0
- Created: 2023-02-13T23:00:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-04T20:40:56.000Z (about 1 year ago)
- Last Synced: 2025-01-30T09:08:54.610Z (4 months ago)
- Topics: driver-station, frc, frc-dashboard, networktables, react
- Language: TypeScript
- Homepage:
- Size: 875 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
NT4 React
Quickly connect your React App to NetworkTables.
[](https://www.npmjs.com/package/ntcore-react)
[](https://codecov.io/github/CrispyBacon1999/ntcore-react)
[](https://main--646502616dfaa0514ada7a02.chromatic.com)
## ⚡️ Quick start
First, create your app using your favorite bundler ([Vite](https://vitejs.dev/) is a great option if you don't have a preference. All of the example code here will be assuming you're using vite)
```bash
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`.
```bash
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.
```tsx
import { NTProvider } from "ntcore-react";
function App() {
return (
{/** Everything else for your app here */}
);
}
```
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.
```tsx
import { NetworkTablesTypeInfos } from "ntcore-ts-client";
import { useNTValue } from "ntcore-react";
const YourComponent = () => {
const intakeExtended = useNTValue(
"/Intake/extended",
NetworkTablesTypeInfos.kBoolean,
false
);
return
Intake Extended: {intakeExtended};
};
```
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.
```tsx
import { NetworkTablesTypeInfos } from "ntcore-ts-client";
import { useNTState } from "ntcore-react";
const YourComponent = () => {
const [ledColors, setColors] = useNTState(
"/LED/color",
NetworkTablesTypeInfos.kString,
"#ffffff"
);
const setColorsToRed = () => {
setColors("#ff0000");
};
const setColorsToBlue = () => {
setColors("#0000ff");
};
return (
LEDs
Red LEDS
Blue LEDS
);
};
```
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. |