A library that enables the use of the alien-signals state management system in React.

• Simple: Easy to implement with minimal code
• Flexible: Reuse a single signal across multiple frameworks
• Type Safe: Full TypeScript support
• Best Reactivity: Leverages alien-signals efficient signal management
• Tree Shakable: Bundle only the code you need

• ✅: Implemented
• 🛑: Not Implemented
• ⚠️: Not Verified
• ⌛️: Coming Soon

npm install alien-signals @gn8/alien-signals-react

import { useSignal } from '@gn8/alien-signals-react';
import { signal } from 'alien-signals';

const $count = signal(0);

export default function Counter() {
  const [count, setCount] = useSignal($count);

  return (
    <button onClick={() => setCount(count + 1)}>
      count is {count}
    </button>
  );
}

• React

The following features and support will be added sequentially:

• SSR verification and support
• Enhancement of test coverage
• Creation of Astro framework usage examples

This project is inspired by the following amazing library:

I have been a long-time user of Nanostores with Astro and was impressed by its ease of use. When I learned about alien-signals, I wanted to utilize its reactivity with the same user experience as Nanostores, which led to the development of this library.

Thanks to Nanostores' excellent implementation approach, we were able to quickly progress with support for various frameworks. Much of our code structure and design patterns are based on insights learned from Nanostores.

We deeply thank the Nanostores team for providing the inspiration and knowledge to start this project.

Most of this library's power comes from alien-signals. We thank the developers of alien-signals.