Share Store State with Signal Pattern

Installation

npm install reactjs-signal

Devtools

• reactjs-signal-devtools

Usage

import React from 'react';
import { useSignal, createSignal } from 'reactjs-signal';

const countSgnal = createSignal({ count: 0 })

const App = () => {
  const [state, setState] = useSignal(countSgnal);

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => setState({ count: state.count + 1 })}>Increment</button>
    </div>
  );
};

API Documentation

createSignal

Creates a writable Alien Signal.

Example

const countSignal = createSignal(0);
countSignal(10); // sets the value to 10

Parameters

• initialValue (T): The initial value of the signal.

Returns

• IWritableSignal<T>: The created Alien Signal.

createComputed

Creates a computed Alien Signal based on a getter function.

Example

const countSignal = createSignal(1);
const doubleSignal = createComputed(() => countSignal() * 2);

Parameters

• fn (() => T): A getter function returning a computed value.

Returns

• ISignal<T>: The created computed signal.

useSignal

React hook returning [value, setValue] for a given Alien Signal. Uses useSyncExternalStore for concurrency-safe re-renders.

Example

const countSignal = createSignal(0);

function Counter() {
  const [count, setCount] = useSignal(countSignal);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Parameters

• alienSignal (IWritableSignal<T>): The signal to read/write.

Returns

• [T, (val: T | ((oldVal: T) => T)) => void]: A tuple [currentValue, setValue].

useSignalValue

React hook returning only the current value of an Alien Signal (or computed). No setter is provided.

Example

const countSignal = createSignal(0);

const doubleSignal = createComputed(() => countSignal() * 2);

function Display() {
  const count = useSignalValue(countSignal);
  const double = useSignalValue(doubleSignal);

  return <div>{count}, {double}</div>;
}

Parameters

• alienSignal (IWritableSignal<T>): The signal to read.

Returns

• T: The current value.

useSetSignal

React hook returning only a setter function for an Alien Signal. No current value is provided, similar to Jotai's useSetAtom.

Example

const countSignal = createSignal(0);
function Incrementor() {
  const setCount = useSetSignal(countSignal);
  return <button onClick={() => setCount((c) => c + 1)}>+1</button>;
}

Parameters

• alienSignal (IWritableSignal<T>): The signal to write.

Returns

• (val: T | ((oldVal: T) => T)) => void: A setter function.

useSignalEffect

React hook for running a side effect whenever Alien Signals' dependencies used in fn change. The effect is cleaned up on component unmount.

Example

function Logger() {
  useSignalEffect(() => {
    console.log('Signal changed:', someSignal());
  });
  return null;
}

Parameters

• fn (() => void): The effect function to run.

useHydrateSignal

React hook to initialize a signal with a value when hydrating from server.

Example

const countSignal = createSignal(0);
useHydrateSignal(countSignal, 10);

Parameters

• alienSignal: The signal to hydrate.
• value: initial value

Returns

• EffectScope: The created effect scope.

Refer

React Alien Signals is a TypeScript library that provides hooks built on top of Alien Signals.