React Crate

A hook library to integrate @rbxts/crate with react-lua.

Notice • Installation • Usage • Documentation

---

📛 Notice

Caution

This package is still in early beta, expect breaking changes

💻 Installation

Dependancies

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

npm i @rbxts/react-crate
yarn add @rbxts/react-crate
pnpm add @rbxts/react-crate

💫 Usage

Lets assume we have the following crate.

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.

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 (
      <textlabel 
        Size={UDim2.fromOffset(200, 50)} 
        Text={`${coins}`} 
      />
    )
}

Bindings

This library provides a hook for using the state as a binding if you prefer.

import { sharedCrate } from "./example/path";
import { useCrateBinding } from "@rbxts/react-crate";

export function MyCrateComponent() {
  const coins = useCrateBinding(sharedCrate, (state) => state.coins);

  return (
      <textlabel 
        Size={UDim2.fromOffset(200, 50)} 
        Text={coins.map((value) => `${value}`)} 
      />
    )
}

💡 Credits

This software uses the following:

• Emojis were taken from here