https://github.com/Neohertz/react-crate
React hooks for @rbxts/crate.
https://github.com/Neohertz/react-crate
Last synced: 5 months ago
JSON representation
React hooks for @rbxts/crate.
- Host: GitHub
- URL: https://github.com/Neohertz/react-crate
- Owner: Neohertz
- License: isc
- Created: 2024-12-10T17:01:49.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-11T21:49:03.000Z (about 1 year ago)
- Last Synced: 2025-08-04T03:31:09.997Z (5 months ago)
- Language: TypeScript
- Size: 1.61 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-lua - react-crate
README
React Crate
A hook library to integrate @rbxts/crate with react-lua.
[![Downloads][downloads-shield]][downloads-url]
[![Contributors][contributors-shield]][contributors-url]
[![Stargazers][stars-shield]][stars-url] [![Issues][issues-shield]][issues-url]
[![License][license-shield]][license-url]
Notice •
Installation •
Usage •
Documentation
---
# 📛 Notice
> [!CAUTION]
> This package is still in **early beta**, expect breaking changes
# 💻 Installation
### Dependancies
```bash
@rbxts/crate@^1.0.1
@rbxts/react@^17.2.3
```
### Install
To install crate, run one of the following commands in your project's directory.
```bash
npm i @rbxts/react-crate
yarn add @rbxts/react-crate
pnpm add @rbxts/react-crate
```
# 💫 Usage
Lets assume we have the following crate.
```ts
import { Crate } from "@rbxts/crate"
export const sharedCrate = new Crate({
coins: 0,
xp: 0,
});
```
To use this crate with react, we can simply use the provided `useCrate()` hook.
```tsx
import { sharedCrate } from "./example/path";
import { useCrate } from "@rbxts/react-crate";
export function MyCrateComponent() {
const coins = useCrate(sharedCrate, (state) => state.coins);
const xp = useCrate(sharedCrate, (state) => state.xp);
useEffect(() => {
print(`XP updated to ${xp}!`);
}, [xp]);
return (
)
}
```
## Bindings
This library provides a hook for using the state as a binding if you prefer.
```tsx
import { sharedCrate } from "./example/path";
import { useCrateBinding } from "@rbxts/react-crate";
export function MyCrateComponent() {
const coins = useCrateBinding(sharedCrate, (state) => state.coins);
return (
`${value}`)}
/>
)
}
```
# 💡 Credits
This software uses the following:
- Emojis were taken from [here](https://emojipedia.org/)
[downloads-shield]: https://img.shields.io/npm/d18m/%40rbxts%2Freact-crate?style=for-the-badge
[downloads-url]: https://www.npmjs.com/package/@rbxts/react-crate
[contributors-shield]: https://img.shields.io/github/contributors/neohertz/react-crate?style=for-the-badge
[contributors-url]: https://github.com/Neohertz/react-crate/graphs/contributors
[stars-shield]: https://img.shields.io/github/stars/neohertz/react-crate?style=for-the-badge
[stars-url]: https://github.com/Neohertz/react-crate/stargazers
[issues-shield]: https://img.shields.io/github/issues/neohertz/react-crate?style=for-the-badge
[issues-url]: https://github.com/Neohertz/react-crate/issues
[license-shield]: https://img.shields.io/github/license/neohertz/react-crate?style=for-the-badge
[license-url]: https://github.com/Neohertz/react-crate/blob/master/LICENSE