Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rbxts/ui-scaler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Charm

Atomic state management for Roblox.
npm package →

Charm is an atomic state management library inspired by Jotai. Designed to be a unique alternative to Reflex, Charm aims to provide a simple and composable interface for your game's state.

[!NOTE] Charm is incomplete and not ready for production use.

📦 Setup

TypeScript

npm install @rbxts/charm
yarn add @rbxts/charm
pnpm add @rbxts/charm

Wally

Add littensy/charm to your wally.toml file.

[dependencies]
Charm = "littensy/charm@VERSION"

📚 API Reference

Charm

`atom(state, options?)`

`effect(callback)`

`subscribe(atom, listener)`

`computed(atom, options?)`

`observe(atom, observer)`

`mapped(atom, mapper)`

`peek(atom)`

React

`useAtom(atom, dependencies?)`

Sync

`sync.client(options)`

`Client.sync(payload)`

`sync.server(options)`

`Server.connect(callback)`

`Server.hydrate(player)`

🚀 Examples

Counter atom

import { atom, subscribe } from "@rbxts/charm";

const counterAtom = atom(0);
const doubleCounterAtom = () => counterAtom() * 2;

subscribe(doubleCounterAtom, (value) => {
    print(value);
});

counterAtom(1);
counterAtom((count) => count + 1);

Counter component

import React from "@rbxts/react";
import { useAtom } from "@rbxts/charm";
import { counterAtom } from "./counter-atom";

function Counter() {
    const [count, setCount] = useAtom(counterAtom);

    return (
        <textlabel
            Text={`Count: ${count}`}
            Size={new UDim2(0, 100, 0, 50)}
            Event={{
                Activated: () => setCount(count + 1),
            }}
        />
    );
}

Charm is released under the MIT License.