signals-react

Minified432 BMinzipped257 B

React integration for @monstermann/signals.

Installation

npm

npm install @monstermann/signals-react

pnpm

pnpm add @monstermann/signals-react

yarn

yarn add @monstermann/signals-react

bun

bun add @monstermann/signals-react

Usage

import { useSignal } from "@monstermann/signals-react";

export function Component() {
    const a = useSignal(signal);
    const b = useSignal(memo);
    const c = useSignal(reducer);
    // Plain functions will get wrapped with a `memo()`
    const d = useSignal(() => {});
}

unplugin-signals-react

Alternatively you can use an unplugin that uses the Oxidation Compiler which automatically wraps signals with useSignal for you - the only prerequisite is that you prefix your signals with $:

Before

export function Component({ className }) {
    const style = $style();
    return (
        <div style={style} className={$class() + className}>
            {$content()}
        </div>
    );
}

After

export function Component({ className }) {
    const style = useSignal($style);
    return (
        <div style={style} className={useSignal(() => $class() + className)}>
            {useSignal($content)}
        </div>
    );
}

Installation

npm

npm install -D @monstermann/signals-react

pnpm

pnpm -D add @monstermann/signals-react

yarn

yarn -D add @monstermann/signals-react

bun

bun -D add @monstermann/signals-react

Usage

Vite

// vite.config.ts
import signals from "@monstermann/signals-react/vite";

export default defineConfig({
    plugins: [signals()],
});

Rollup

// rollup.config.js
import signals from "@monstermann/signals-react/rollup";

export default {
    plugins: [signals()],
};

Rolldown

// rolldown.config.js
import signals from "@monstermann/signals-react/rolldown";

export default {
    plugins: [signals()],
};

Webpack

// webpack.config.js
const signals = require("@monstermann/signals-react/webpack");

module.exports = {
    plugins: [signals()],
};

Rspack

// rspack.config.js
const signals = require("@monstermann/signals-react/rspack");

module.exports = {
    plugins: [signals()],
};

ESBuild

// esbuild.config.js
import { build } from "esbuild";
import signals from "@monstermann/signals-react/esbuild";

build({
    plugins: [signals()],
});