@aminnairi/react-signal

Signal Library for React

Summary

• Introduction
• Features
• Installation
• Uninstallation
• API
  • Signal
  • useSignal
  • useSignalConstructor
  • LocalStorageSignal
  • SessionStorageSignal
  • StorageSignal
  • createState
  • createLocalStorageState
  • createSessionStorageState
• Usage
  • Custom hook
  • Computed value
  • HTTP requests
  • Object
• Contributing
• Issues
• Security
• License
• Changelog
• Code of Conduct

Back to summary

Introduction

Welcome to our Signal Library for React! This library provides a robust signal management system to enhance your React applications. With this library, you can easily manage and propagate changes in your application's state using signals. It is designed with simplicity and efficiency in mind, offering an alternative to the tedious creation of React Contexts for sharing state between components.

Back to summary

Features

• Simple and Lightweight: Our signal management library is designed to be lightweight and straightforward. It won't add unnecessary complexity to your React application.
• React Framework Agnostic: Whether you're using React with Material UI, TailwindCSS, BootstrapCSS, or any other UI framework, our library can seamlessly integrate into your project. It doesn't impose any specific UI framework requirements.
• Efficient State Propagation: Easily manage state updates by emitting signals. With this library, you can efficiently notify components about changes in your application's state.
• Dynamic Signaling: Signal emission allows for dynamic updates across your React components. It's a powerful tool for creating interactive and responsive user interfaces.
• TypeScript Support: Our library is written in TypeScript, providing you with strong type safety and improved code quality and maintainability.
• Customizable and Extensible: The library is designed to be customizable and extensible. You can adapt it to your specific project needs and build on top of it as your application requirements evolve.
• Performance Optimized: We use efficient algorithms and techniques to ensure that signal management remains performant, even in applications with complex state structures.
• No External Dependencies: Our library doesn't rely on external dependencies, reducing the risk of version conflicts and ensuring a seamless integration into your React project.
• Open Source: This library is open source, allowing you to contribute to its development, report issues, and benefit from a collaborative community of users.
• Clear and Concise API: We provide a straightforward API with clear and concise functions, making it easy for developers of all skill levels to use and understand.
• Community Support: Join a community of developers who use this library for their signal management needs. Get help, share your insights, and learn from others in the community.
• Documentation and Examples: We provide extensive documentation and examples to help you get started quickly and make the most of the library's features.
• Continuous Updates: We're committed to maintaining and improving this library. Expect continuous updates and improvements to ensure compatibility with the latest React technologies and best practices.

With our Signal Library for React, you'll have a powerful tool at your disposal to manage state changes, create responsive, dynamic user interfaces, and simplify the process of sharing state between components without the need for complex React Context setups. Whether you're a beginner or an experienced developer, this library will streamline your React application development process. Join our community and start enhancing your React projects today!

Back to summary

Installation

1npm install @aminnairi/react-signal

Back to summary

Uninstallation

1npm uninstall @aminnairi/react-signal

Back to summary

API

Signal

1type Subscriber = () => void;
2type Update<Value> = (oldValue: Value) => Value;
3
4class Signal<Value> {
5    private subscribers;
6    private value;
7    constructor(initialValue: Value);
8    emit(newValue: Value): void;
9    getValue(): Value;
10    subscribe(newSubscriber: Subscriber): () => void;
11    next(update: Update<Value>): void;
12}

The Signal class is the core component of the library. It represents a signal that can be used to manage state changes and notify components when the state is updated. You can create instances of the Signal class to represent different pieces of state in your application.

1import { Signal } from "@aminnairi/react-signal";
2
3export const countSignal = new Signal(0);

1import { Signal } from "@aminnairi/react-signal";
2
3export type User = {
4  id: string,
5  email: string,
6  age: number
7}
8
9export const usersSignal = new Signal<Array<User>>([]);

Back to summary

useSignal

1const useSignal: <Value>(signal: Signal<Value>) => Value;

The useSignal hook is used to integrate a Signal instance with a functional component. It returns the current value of the signal and a function to update the signal's value. This hook makes it easy to work with signals in your React components.

1import React, { Fragment, useCallback } from "react";
2import { useSignal } from "@aminnairi/react-signal";
3import { countSignal } from "../signals/count";
4
5function Counter() {
6  const count = useSignal(countSignal);
7
8  const increment = useCallback(() => {
9    countSignal.emit(count + 1);
10  }, [count]);
11
12  const decrement = useCallback(() => {
13    countSignal.next(oldCount => oldCount - 1);
14  }, []);
15
16  return (
17    <Fragment>
18      <p>Count: {count}</p>
19      <button onClick={increment}>
20        Increment
21      </button>
22      <button onClick={decrement}>
23        Decrement
24      </button>
25    </Fragment>
26  );
27}

Back to summary

useSignalConstructor

1type SignalConstructor<Value> = () => Signal<Value>;
2
3const useSignalConstructor: <Value>(signalConstructor: SignalConstructor<Value>) => Value;

The useSignalConstructor function is used to create and initialize a Signal instance within a functional component. It accepts a SignalConstructor as its parameter, which defines the initial value of the signal and an optional validation function. This hook is especially useful for managing state in your React components.

1import { Capacitor } from "@capacitor/core";
2import { Signal, useSignalConstructor } from "@aminnairi/react-signal";
3
4export const HomePage = () => {
5  const title = useSignalConstructor(() => {
6    const platform = Capacitor.getPlatform();
7
8    if (pltaform === "ios") {
9      return new Signal("Welcome, iOS user!");
10    }
11
12    if (pltaform === "android") {
13      return new Signal("Welcome, Android user!");
14    }
15
16    return new Signal("Welcome, user!");
17  });
18
19  return title;
20};

In this example, the useSignalConstructor hook is used to create and initialize a Signal instance with an initial value of 0. The countSignal represents the state, and setCount is the function to update its value.

Back to summary

LocalStorageSignal

1type Parser<Value> = (value: unknown) => Value;
2
3type StorageSignalConstructor<Value> = {
4    storage: Storage;
5    key: string;
6    fallback: Value;
7    parse: Validation<Value>;
8};
9
10type LocalStorageSignalConstructor<Value> = Omit<StorageSignalConstructor<Value>, "storage">;
11
12class LocalStorageSignal<Value> extends StorageSignal<Value> {
13  constructor({ key, fallback, parse }: LocalStorageSignalConstructor<Value>);
14}

The LocalStorageSignal is another feature of the @aminnairi/react-signal library that offers built-in local storage persistence for managing state variables. Local storage allows you to store data on the user's device even after they close the browser. With the LocalStorageSignal, you can define a key, an initial value, and an optional validation function to ensure the stored data is of the correct type.

1import { LocalStorageSignal } from "@aminnairi/react-signal";
2
3export type Theme = "light" | "dark"
4
5export const themeSignal = new LocalStorageSignal<Theme>({
6  key: "theme",
7  fallback: "dark",
8  parse: (value): Theme => ["dark", "light"].includes(value) ? value : "light"
9});

1import { Fragment, useCallback } from "react";
2import { useSignal } from "@aminnairi/react-signal";
3import { themeSignal } from "../signals/theme";
4
5export const ThemePage = () => {
6  const theme = useSignal(themeSignal);
7
8  const toggleTheme = useCallback(() => {
9    themeSignal.emit(theme === "light" ? "dark" : "light");
10  }, [theme]);
11
12  const reset = useCallback(() => {
13    themeSignal.reset();
14  }, []);
15
16  return (
17    <Fragment>
18      <button onClick={toggleTheme}>
19        Toggle theme ({theme})
20      </button>
21      <button onClick={reset}>
22        Clear storage
23      </button>
24    </Fragment>
25  );
26}

In this example, we create a themeSignal that is stored in local storage under the key "theme." This allows you to persist and manage the theme of your application across different user sessions, providing a seamless user experience.

Back to summary

SessionStorageSignal

1type Parser<Value> = (value: unknown) => Value;
2
3type StorageSignalConstructor<Value> = {
4    storage: Storage;
5    key: string;
6    fallback: Value;
7    parse: Parser<Value>;
8};
9
10type SessionStorageSignalConstructor<Value> = Omit<StorageSignalConstructor<Value>, "storage">;
11
12class SessionStorageSignal<Value> extends StorageSignal<Value> {
13  constructor({ key, fallback, parse }: StorageSignalConstructor<Value>);
14}

The SessionStorageSignal is a feature of the @aminnairi/react-signal library that allows you to manage state variables with built-in session storage persistence. Session storage is similar to local storage, but the data is only available for the duration of a single page session. When you create a SessionStorageSignal, you can define a key, an initial value, and an optional validation function to ensure the stored data is of the correct type.

1import { SessionStorageSignal } from "@aminnairi/react-signal";
2
3export type Theme = "light" | "dark"
4
5export const themeSignal = new SessionStorageSignal<Theme>({
6  key: "theme",
7  fallback: "dark",
8  parse: (value): Theme => ["dark", "light"].includes(value) ? value : "light"
9});

1import { Fragment, useCallback } from "react";
2import { useSignal } from "@aminnairi/react-signal";
3import { themeSignal } from "../signals/theme";
4
5export const ThemePage = () => {
6  const theme = useSignal(themeSignal);
7
8  const toggleTheme = useCallback(() => {
9    themeSignal.emit(theme === "light" ? "dark" : "light");
10  }, [theme]);
11
12  const reset = useCallback(() => {
13    themeSignal.reset();
14  }, []);
15
16  return (
17    <Fragment>
18      <button onClick={toggleTheme}>
19        Toggle theme ({theme})
20      </button>
21      <button onClick={reset}>
22        Clear storage
23      </button>
24    </Fragment>
25  );
26}

In this example, we create a themeSignal that is stored in session storage under the key "theme." It allows you to persist and manage the theme of your application across different user sessions.

Back to summary

StorageSignal

1type Parser<Value> = (value: unknown) => Value;
2
3type StorageSignalConstructor<Value> = {
4    storage: Storage;
5    key: string;
6    fallback: Value;
7    parse: Parser<Value>;
8};
9
10class StorageSignal<Value> extends Signal<Value> {
11    private key;
12    private storage;
13    constructor({ storage, key, fallback, parse }: StorageSignalConstructor<Value>);
14    emit(newValue: Value): void;
15    remove(): void;
16}

The StorageSignal is a versatile feature of the @aminnairi/react-signal library that enables you to manage state variables with custom storage solutions. It's not limited to local storage or session storage; you can use it with any storage implementation that adheres to the Storage interface. With the StorageSignal, you can specify the storage, key, initial value, and an optional validation function to ensure the stored data is of the correct type.

1import { StorageSignal } from "@aminnairi/react-signal";
2
3export type Theme = "light" | "dark"
4
5export class MyStorage implements Storage {
6  //...
7}
8
9const myStorage = new MyStorage();
10
11export const themeSignal = new StorageSignal<Theme>({
12  storage: myStorage,
13  key: "theme",
14  value: "dark",
15  validation: (value): value is Theme => {
16    return value === "dark" || value === "light"
17  }
18});

1import { Fragment, useCallback } from "react";
2import { useSignal } from "@aminnairi/react-signal";
3import { themeSignal } from "../signals/theme";
4
5export const ThemePage = () => {
6  const theme = useSignal(themeSignal);
7
8  const toggleTheme = useCallback(() => {
9    themeSignal.emit(theme === "light" ? "dark" : "light");
10  }, [theme]);
11
12  const reset = useCallback(() => {
13    themeSignal.reset();
14  }, []);
15
16  return (
17    <Fragment>
18      <button onClick={toggleTheme}>
19        Toggle theme ({theme})
20      </button>
21      <button onClick={reset}>
22        Clear storage
23      </button>
24    </Fragment>
25  );
26}

In this example, we create a themeSignal that uses a custom storage solution (in this case, MyStorage) to persist and manage the theme of your application. This approach allows you to use your own storage solution while still benefiting from the features of the StorageSignal.

createState

1type SetStateFunction<Value> = (valueOrConstructor: Value | ((oldValue: Value) => Value)) => void
2
3type UseStateFunction<Value> = () => [Value, SetStateFunction<Value>]
4
5function createState<Value>(initialValue: Value): UseStateFunction<Value>

This function allows you to simplify the creation of signals by providing a higher level function.

1import { useCallback } from "react";
2import { createState } from "@aminnairi/react-signal";
3
4const useCounterState = createState(0);
5
6export const Counter = () => {
7  const [counter, setCounter] = useCounterState();
8
9  const increment = useCallback(() => {
10    setCounter(previousCounter => {
11      return previousCounter + 1;
12    });
13  }, [setCounter]);
14
15  const decrementCounter = useCallback(() => {
16    setCounter(counter - 1);
17  }, [counter]);
18
19  return (
20    <>
21      <button onClick={decrement}>
22        decrement
23      </button>
24      <span>
25        {counter}
26      </span>
27      <button onClick={increment}>
28        increment
29      </button>
30    </>
31  );
32}

You can also make it a custom hook if needed.

1import { useCallback } from "react";
2import { createState } from "@aminnairi/react-signal";
3
4const useCounterState = createState(0);
5
6export const useCounter = () => {
7  const [counter, setCounter] = useCounterState();
8
9  const increment = useCallback(() => {
10    setCounter(previousCounter => {
11      return previousCounter + 1;
12    });
13  }, [setCounter]);
14
15  const decrementCounter = useCallback(() => {
16    setCounter(counter - 1);
17  }, [counter]);
18
19  return {
20    counter,
21    increment,
22    decrement
23  };
24}

And use it as usual.

1import { useCallback } from "react";
2import { useCounter } from "../hooks/useCounter";
3
4export const Counter = () => {
5  const { counter, increment, decrement } = useCounter();
6
7  return (
8    <>
9      <button onClick={decrement}>
10        decrement
11      </button>
12      <span>
13        {counter}
14      </span>
15      <button onClick={increment}>
16        increment
17      </button>
18    </>
19  );
20}

Back to summary

createLocalStorageState

1type SetLocalStorageStateFunction<Value> = (value: Value | ((oldValue: Value) => Value)) => void
2
3type RemoveLocalStorageStateFunction = () => void
4
5function createLocalStorageState<Value>(options: LocalStorageSignalConstructor<Value>)

This function allows you to simplify the creation of signals by providing a higher level function. Additionally, it uses internally the LocalStorageSignal constructor, so your state remains in the client's browser and is retrieved when the window is loaded or reloaded.

1import { useCallback } from "react";
2import { createLocalStorageState } from "@aminnairi/react-signal";
3
4const useCounterState = createLocalStorageState({
5  key: "counter",
6  parse: (value: unknown): number => Number(value) || 0,
7  fallback: 0
8});
9
10export const Counter = () => {
11  const [counter, setCounter, resetCounter] = useCounterState();
12
13  const increment = useCallback(() => {
14    setCounter(previousCounter => {
15      return previousCounter + 1;
16    });
17  }, [setCounter]);
18
19  const decrementCounter = useCallback(() => {
20    setCounter(counter - 1);
21  }, [counter]);
22
23  const reset = useCallback(() => {
24    resetCounter();
25  }, [resetCounter]);
26
27  return (
28    <>
29      <button onClick={decrement}>
30        decrement
31      </button>
32      <span>
33        {counter}
34      </span>
35      <button onClick={increment}>
36        increment
37      </button>
38      <button onClick={reset}>
39        reset
40      </button>
41    </>
42  );
43}

You can also make it a custom hook if needed.

1import { useCallback } from "react";
2import { createLocalStorageState } from "@aminnairi/react-signal";
3
4const useCounterState = createLocalStorageState({
5  key: "counter",
6  parse: (value: unknown): number => Number(value) || 0,
7  fallback: 0
8});
9
10export const useCounter = () => {
11  const [counter, setCounter, resetCounter] = useCounterState();
12
13  const increment = useCallback(() => {
14    setCounter(previousCounter => {
15      return previousCounter + 1;
16    });
17  }, [setCounter]);
18
19  const decrementCounter = useCallback(() => {
20    setCounter(counter - 1);
21  }, [counter]);
22
23  const reset = useCallback(() => {
24    resetCounter();
25  }, [resetCounter]);
26
27  return {
28    counter,
29    increment,
30    decrement,
31    reset
32  };
33}

And use it as usual.

1import { useCallback } from "react";
2import { useCounter } from "../hooks/useCounter";
3
4export const Counter = () => {
5  const {
6    counter,
7    increment,
8    decrement,
9    reset
10    } = useCounter();
11
12  return (
13    <>
14      <button onClick={decrement}>
15        decrement
16      </button>
17      <span>
18        {counter}
19      </span>
20      <button onClick={increment}>
21        increment
22      </button>
23      <button onClick={reset}>
24        reset
25      </button>
26    </>
27  );
28}

Back to summary

createSessionStorageState

1type SetSessionStorageStateFunction<Value> = (value: Value | ((oldValue: Value) => Value)) => void
2
3type RemoveSessionStorageStateFunction = () => void
4
5function createSessionStorageState<Value>(options: SessionStorageSignalConstructor<Value>)

This function allows you to simplify the creation of signals by providing a higher level function. Additionally, it uses internally the SessionStorageSignal constructor, so your state remains in the client's browser and is retrieved when the window is loaded or reloaded.

In contrast to the LocalStorageSignal, the SessionStorageSignal keep the data until the session is closed, for some browser, a session is equivalent to the lifetime of the tab, so when the tab is closed, the session is also wiped out.

1import { useCallback } from "react";
2import { createSessionStorageState } from "@aminnairi/react-signal";
3
4const useCounterState = createSessionStorageState({
5  key: "counter",
6  fallback: 0,
7  parse: (value: unknown): number => Number(value) || 0
8});
9
10export const Counter = () => {
11  const [counter, setCounter, removeCounter] = useCounterState();
12
13  const increment = useCallback(() => {
14    setCounter(previousCounter => {
15      return previousCounter + 1;
16    });
17  }, [setCounter]);
18
19  const decrement = useCallback(() => {
20    setCounter(counter - 1);
21  }, [counter]);
22
23  const reset = useCallback(() => {
24    removeCounter();
25  }, [removeCounter]);
26
27  return (
28    <>
29      <button onClick={decrement}>
30        decrement
31      </button>
32      <span>
33        {counter}
34      </span>
35      <button onClick={increment}>
36        increment
37      </button>
38      <button onClick={reset}>
39        reset
40      </button>
41    </>
42  );
43}

You can also make it a custom hook if needed.

1import { useCallback } from "react";
2import { createSessionStorageState } from "@aminnairi/react-signal";
3
4const useCounterState = createSessionStorageState({
5  key: "counter",
6  fallback: 0,
7  parse: (value: unknown): number => Number(value) || 0
8});
9
10export const useCounter = () => {
11  const [counter, setCounter, resetCounter] = useCounterState();
12
13  const increment = useCallback(() => {
14    setCounter(previousCounter => {
15      return previousCounter + 1;
16    });
17  }, [setCounter]);
18
19  const decrementCounter = useCallback(() => {
20    setCounter(counter - 1);
21  }, [counter]);
22
23  const reset = useCallback(() => {
24    resetCounter();
25  }, [reset]);
26
27  return {
28    counter,
29    increment,
30    decrement,
31    reset
32  };
33}

And use it as usual.

1import { useCallback } from "react";
2import { useCounter } from "../hooks/useCounter";
3
4export const Counter = () => {
5  const {
6    counter,
7    increment,
8    decrement,
9    reset
10  } = useCounter();
11
12  return (
13    <>
14      <button onClick={decrement}>
15        decrement
16      </button>
17      <span>
18        {counter}
19      </span>
20      <button onClick={increment}>
21        increment
22      </button>
23      <button onClick={reset}>
24        reset
25      </button>
26    </>
27  );
28}

Back to summary

Usage

Custom hook

If you're looking to efficiently manage state in your React applications, the @aminnairi/react-signal library provides a powerful tool. One of the key features it offers is the ability to create custom hooks for shared state management. In the provided example, we have a custom hook named useCounter.

With useCounter, you can effortlessly access and modify a shared state variable across multiple components. This state is encapsulated within a Signal object, which ensures reactivity and synchronization among components that utilize this hook. This approach simplifies state management, making it easier for you to maintain and share state variables without the need for prop drilling.

1import { useCallback } from "react";
2import { Signal, useSignal } from "@aminnairi/react-signal";
3
4export const counterSignal = new Signal(0);
5
6export const useCounter = () => {
7  const counter = useSignal(counterSignal);
8
9  const increment = useCallback(() => {
10    counterSignal.emit(counter + 1);
11  }, [counter]);
12
13  const decrement = useCallback(() => {
14    counterSignal.emit(counter - 1);
15  }, [counter]);
16
17  return {
18    counter,
19    increment,
20    decrement
21  };
22};

1import { Fragment } from "react";
2import { useCounter } from "../hooks/counter";
3
4export const AboutPage = () => {
5  const { counter, increment, decrement } = useCounter();
6
7  return (
8    <Fragment>
9      <h1>About</h1>
10      <button onClick={decrement}>
11        Decrement
12      </button>
13      <span>
14        {counter}
15      </span>
16      <button onClick={increment}>
17        Increment
18      </button>
19    </Fragment>
20  );
21};

1import { Fragment } from "react";
2import { useCounter } from "../hooks/counter";
3
4export const HomePage = () => {
5  const { counter, increment, decrement } = useCounter();
6
7  return (
8    <Fragment>
9      <h1>Home</h1>
10      <button onClick={decrement}>
11        Decrement
12      </button>
13      <span>
14        {counter}
15      </span>
16      <button onClick={increment}>
17        Increment
18      </button>
19    </Fragment>
20  );
21};

Back to summary

Computed value

The library allows you to create computed values, which are values that depend on other state variables and automatically update when their dependencies change. In the example, we demonstrate how to use the useSignal hook to create a computed value, doubleCounter.

By initializing a Signal object for the counter state and using the useMemo hook, you can compute doubleCounter, which is always double the value of counter. The great advantage here is that doubleCounter will automatically recalculate whenever counter changes, ensuring that it always reflects the correct value based on its dependencies.

To further enhance performance, you can define functions like increment and decrement using the useCallback hook, which optimizes these functions so that they are recreated only when necessary, based on their dependencies.

1import { Fragment, useCallback, useMemo } from "react";
2import { Signal, useSignal } from "@aminnairi/react-signal";
3
4const counterSignal = new Signal(0);
5
6export const HomePage = () => {
7  const counter = useSignal(counterSignal);
8  const doubleCounter = useMemo(() => counter * 2, [counter]);
9
10  const increment = useCallback(() => {
11    counterSignal.emit(counter + 1);
12  }, [counter]);
13
14  const decrement = useCallback(() => {
15    counterSignal.emit(counter - 1);
16  }, [counter]);
17
18  return (
19    <Fragment>
20      <button onClick={decrement}>
21        Decrement
22      </button>
23      <span>{counter} (double is {doubleCounter})</span>
24      <button onClick={increment}>
25        Increment
26      </button>
27    </Fragment>
28  );
29}

Back to summary

HTTP requests

In this section, we showcase a practical example of utilizing the React Signal library to manage HTTP requests and state in a React component. The code snippets illustrate the creation and use of signals for handling loading indicators, error messages, and user data.

The first three code snippets demonstrate the creation of signals for error handling, loading indicators, and user data, respectively. Each signal instance is initialized with an initial value and will be used to manage the corresponding state throughout the component's lifecycle.

The final code snippet presents a React component called UserPage, which utilizes these signals to orchestrate an HTTP request. It also showcases how signals are leveraged to manage loading and error states gracefully, ensuring a smooth user experience. The use of signals simplifies the handling of asynchronous operations and state transitions, resulting in cleaner and more maintainable code.

1import { Signal } from "@aminnairi/react-signal";
2
3export const errorSignal = new Signal<Error | null>(null);

1import { Signal } from "@aminnairi/react-signal";
2
3export const loadingSignal = new Signal(false);

1import { Signal } from "@aminnairi/react-signal";
2
3export type User = {
4  id: number,
5  username: string
6}
7
8export const userSignal = new Signal<User | null>(null);

1import { useEffect } from "react";
2import { useSignal } from "@aminnairi/react-signal";
3import { userSignal } from "../signals/users";
4import { loadingSignal } from "../signals/loading";
5import { errorSignal } from "../signals/error";
6
7export const UserPage = () => {
8  const user = useSignal(userSignal);
9  const loading = useSignal(loadingSignal);
10  const error = useSignal(errorSignal);
11
12  useEffect(() => {
13    errorSignal.emit(null);
14    loadingSignal.emit(true);
15
16    fetch("https://jsonplaceholder.typicode.com/users/1").then(response => {
17      return response.json();
18    }).then(user => {
19      userSignal.emit({
20        id: user.id,
21        username: user.username
22      });
23    }).catch(error => {
24      errorSignal.emit(error);
25    }).finally(() => {
26      loadingSignal.emit(false);
27    });
28  }, []);
29
30  if (loading) {
31    return (
32      <p>Loading...</p>
33    );
34  }
35
36  if (error) {
37    return error.message;
38  }
39
40  if (!user) {
41    return (
42      <p>No user found</p>
43    );
44  }
45
46  return (
47    <table>
48      <tbody>
49        <tr>
50          <td>{user.id}</td>
51          <td>{user.username}</td>
52        </tr>
53      </tbody>
54    </table>
55  );
56};

Object

In this example, we demonstrate how to use the library for managing registration-related state in a React component. The code showcases the creation of a registerSignal signal instance, which is used to manage email and password fields within a registration form. This library simplifies the process of handling user input and keeping the component's state synchronized with minimal effort.

1import { Signal } from "@aminnairi/react-signal";
2
3export const registerSignal = new Signal({
4  email: "",
5  password: ""
6});

1import { ChangeEventHandler, useCallback } from "react";
2import { useSignal } from "@aminnairi/react-signal"
3import { registerSignal } from "../signals/register";
4
5export const RegisterPage = () => {
6  const register = useSignal(registerSignal);
7
8  const setEmail: ChangeEventHandler<HTMLInputElement> = useCallback(event => {
9    registerSignal.next(oldRegister => {
10      return {
11        ...oldRegister,
12        email: event.target.value
13      }
14    });
15  }, []);
16
17  const setPassword: ChangeEventHandler<HTMLInputElement> = useCallback(event => {
18    registerSignal.next(oldRegister => {
19      return {
20        ...oldRegister,
21        password: event.target.value
22      }
23    });
24  }, []);
25
26  return (
27    <form>
28      <input
29        type="email"
30        value={register.email}
31        onChange={setEmail} />
32      <input
33        type="password"
34        value={register.password}
35        onChange={setPassword} />
36    </form>
37  );
38}

Contributing

The CONTRIBUTING.md file contains guidelines and instructions for individuals who want to contribute to this project. Whether you're interested in reporting bugs, suggesting improvements, or submitting code changes, the contributing guide provides valuable information on how to get involved. We welcome contributions from the community and appreciate your efforts to help make this project better.

Back to summary

Issues

The issues section is where you can view and track the current issues, bug reports, and feature requests related to this project. It serves as a central place for users and contributors to discuss and report problems, share ideas, and provide feedback. If you encounter an issue or have a suggestion, please check the issues section to see if it's already been raised or to submit a new issue.

Back to summary

Security

The SECURITY.md file outlines our security policy and provides guidance on how to report security vulnerabilities in this project. We take security seriously and encourage responsible disclosure of any security issues you may discover. Please review this section for details on how to report security concerns and how we handle them.

Back to summary

License

The LICENSE file contains information about the licensing terms and conditions for using this project. It specifies how the project's code can be used, modified, and distributed. It's important to review and understand the project's license to ensure compliance with its terms.

Back to summary

Changelog

The CHANGELOG.md file provides a detailed history of changes, updates, and new features in this project. It's a useful resource for understanding the evolution of the software and identifying what has been added or fixed in each release.

Back to summary

Code of Conduct

The CODE_OF_CONDUCT.md outlines the expectations and behavior we uphold in this project's community. It sets guidelines for respectful and inclusive interactions among contributors, users, and maintainers. We encourage everyone to review and adhere to the code of conduct to foster a welcoming and productive environment.

Back to summary