Share Store State with Signal Pattern

Installation

``bash
npm install reactjs-signal
`

Devtools

- reactjs-signal-devtools

Usage

`tsx
import React from 'react';
import { useSignal } from 'reactjs-signal';

const App = () => {
const [state, setState] = useSignal({ count: 0 });

return (



);
};
`

API Documentation

$3

Creates a writable Alien Signal.

#### Example

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

#### Parameters

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

#### Returns

- IWritableSignal: The created Alien Signal.

$3

Creates a computed Alien Signal based on a getter function.

#### Example

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

#### Parameters

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

#### Returns

- ISignal: The created computed signal.




$3

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

#### Example

`typescript
const countSignal = createSignal(0);
function Counter() {
const [count, setCount] = useSignal(countSignal);
return setCount(count + 1)}>{count};
}
`

#### Parameters

- alienSignal (IWritableSignal): The signal to read/write.

#### Returns

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

$3

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

#### Example

`typescript
const countSignal = createSignal(0);
const doubleSignal = createComputed(() => countSignal() * 2);
function Display() {
const count = useSignalValue(countSignal);
const double = useSignalValue(doubleSignal);
return

;
}
`

#### Parameters

- alienSignal (IWritableSignal): The signal to read.

#### Returns

- T: The current value.

$3

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

#### Example

`typescript
const countSignal = createSignal(0);
function Incrementor() {
const setCount = useSetSignal(countSignal);
return setCount((c) => c + 1)}>+1;
}
`

#### Parameters

- alienSignal (IWritableSignal): The signal to write.

#### Returns

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

$3

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

#### Example

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

#### Parameters

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




$3

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

#### Example

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

#### Parameters
- alienSignal: The signal to hydrate.
- value: initial value

#### Returns

- EffectScope: The created effect scope.

$3

Gets the current value of an Alien Signal without subscribing to updates.

- Use case: reading signal value outside React components.

#### Example

`typescript
const countSignal = createSignal(0);
const { value, setValue } = getSignal(countSignal);
console.log(value()); // current value
setValue(10); // set value to 10
``

Refer

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