React x xignal

Install

npm i xignal @xignal/react

Usage

Basic

// ./signal.ts

import * as xignal from "xignal";

export const count = xignal.state(0);
export const doubled = xignal.computed(() => count.get() * 2);

useSignalValue

// ./counter.tsx

import { useSignalValue } from "@xignal/react";

import { count, doubled } from "./signal";

const Counter = () => {
	const countValue = useSignalValue(count);
	const doubledValue = useSignalValue(doubled);
	return (
		<div>
			<div>count {countValue}</div>
			<div>doubled {doubledValue}</div>
		</div>
	);
};

useSignalState

import { useSignalState } from "@xignal/react";

import { count } from "./signal";

const Component = () => {
	const [countValue, countUpdate] = useSignalState(count);
};

useSignalComputed

import { useSignalComputed } from "@xignal/react";

import { count } from "./signal";

const Component = () => {
	const doubledValue = useSignalComputed(() => count.get() * 2);
};

Show

import * as xignal from "xignal";
import { Show } from "@xignal/react";

const shouldShow = xignal.state(false);

const App = () => {
	return <Show when={shouldShow}>children</Show>;
};

Utils

import { createStateWithUseSignalValue, createComputedWithUseSignalValue } from "@xignal/react";

const [count, useCount] = createStateWithUseSignalValue(0);
const [doubled, useDoubled] = createComputedWithUseSignalValue(() => count.get() * 2);

License

MIT