use

React hook to consume Signify state in components with automatic re-rendering.

Description

The use method is a React hook that subscribes a component to state changes. When the state updates, components using this hook will automatically re-render. You can optionally transform the state value using a picker function.

Input/Output

Input	Type	Description
pickValue	(value: T) => P (optional)	Function to transform or pick part of the state

Output	Type	Description
Returns	T | P	Current state value or transformed value

Example

import { signify } from "react-signify";
import React from "react";

const sCounter = signify(0);
const sUser = signify({ name: "John", age: 25, email: "john@email.com" });

function Counter() {
  const count = sCounter.use();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => sCounter.set(count + 1)}>Increment</button>
    </div>
  );
}

function UserName() {
  // Using picker function to get only the name
  const name = sUser.use((state) => state.name);

  return <h1>Hello, {name}!</h1>;
}