alien-signals for React


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

🛸 Features

- 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

🔌 Status

| Framework | Status | SSR Support | Repo |
| --------- | ------ | ----------- | ----------------------------- |
| React | ✅ | 🔼 | 🔗 |
| Solid | ✅ | 🔼 | 🔗 |
| Vue | ✅ | 🔼 | 🔗 |
| Svelte | ✅ | 🔼 | 🔗 |

- ✅: Implemented
- 🔼: Avoidable
- ⚠️: Unverified
- ⌛️: Coming Soon

💻 Guide

$3

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

$3


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

const countSignal = signal(0);

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

return (
setCount(count + 1)}>
count is {count}

);
}
``

$3

- React

📚 Roadmap

The following features and support will be added sequentially:

- [ ] Documentation and solutions for handling SSR hydration errors
- [ ] Enhancement of test coverage
- [x] Creation of Astro framework usage examples

💡 Inspiration

This project is inspired by the following amazing library:

$3

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.

🎉 Acknowledgments

$3

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