# ntcore-react
> React bindings for ntcore-ts-client.
Latest version **2.0.3** (published 2024-03-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install ntcore-react
pnpm add ntcore-react
yarn add ntcore-react
bun add ntcore-react
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.0.3 |
| Published | 2024-03-04 |
| First published | 2023-02-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 429.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Josh Bacon |
| Maintainers | cr1spybacon8r |
| Keywords | frc, networktables, nt4, react |
## Links
- npm: https://www.npmjs.com/package/ntcore-react
- Repository: https://github.com/CrispyBacon1999/ntcore-react
- Homepage: https://github.com/CrispyBacon1999/ntcore-react#readme
- Issues: https://github.com/CrispyBacon1999/ntcore-react/issues
- npm.io page: https://npm.io/package/ntcore-react
## Dependencies (4)
- [zod](https://npm.io/package/zod.md) ^3.22.4
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [ntcore-ts-client](https://npm.io/package/ntcore-ts-client.md) ^2.0.0-beta.6
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 2.0.3 (latest) — 2024-03-04
- 2.0.2 — 2024-03-04
- 2.0.1 — 2024-01-09
- 1.1.2 — 2023-11-16
- 1.1.1 — 2023-05-17
- 1.1.0 — 2023-02-15
- 1.0.1 — 2023-02-14
- 1.0.0 — 2023-02-14
## 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 (
);
};
```
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. |
---
_Source: https://npm.io/package/ntcore-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._