Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alloc/wana
Easy observable state for React ⚡️
https://github.com/alloc/wana
hooks observable react transparent
Last synced: about 21 hours ago
JSON representation
Easy observable state for React ⚡️
- Host: GitHub
- URL: https://github.com/alloc/wana
- Owner: alloc
- License: mit
- Created: 2019-06-25T14:14:14.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-08-03T06:31:07.000Z (over 1 year ago)
- Last Synced: 2025-02-13T17:14:33.986Z (8 days ago)
- Topics: hooks, observable, react, transparent
- Language: TypeScript
- Homepage:
- Size: 887 KB
- Stars: 178
- Watchers: 6
- Forks: 9
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# wana
[](https://www.npmjs.com/package/wana)
[](https://travis-ci.org/alloc/wana)
[](https://codecov.io/gh/alloc/wana)
[](https://bundlephobia.com/result?p=wana)
[](https://github.com/prettier/prettier)
[](https://paypal.me/alecdotbiz)
Observable state with ease. ⚡️
Bring your React components to the next level. ⚛️
- **Transparent proxies** (no special classes)
- **Implicit observation** (use your objects like normal)
- **Observable objects, arrays, sets, and maps** (even custom classes)
- **Automatic reactions to observable changes** (see the `auto/useAuto/withAuto` functions)
- **Support for deep observation** (see the `watch` function)
- **Memoized derivations** (see the `o/useDerived` functions)
- **Prevent unnecessary renders**
- **80% less SLOC than MobX**
**Why build this?** The goal of this library is to explore the MobX approach of
writing React components by designing a new API from the ground up with React in
mind from the get-go. Another goal is to keep a lean core by writing an observability
engine from scratch.
**Who built this?** [Alec Larson](https://twitter.com/alecdotbiz), the co-author of
`react-spring` and `immer`. You can support his work by [becoming a patron](https://www.patreon.com/aleclarson).
## Exports
- `o()` for making observable objects
- `auto()` for reactive effects
- `when()` for reactive promises
- `no()` for unobserved objects
- `noto()` for unobserved scopes
- `watch()` for listening to deep changes
- `shallowChanges()` for listening to shallow changes
- `withAuto()` for reactive components
- `useAuto()` for easy `auto` calls in components
- `useO()` for observable component state
- `useDerived()` for observable getters
- `useChanges()` for change listeners
- `useEffects()` for reactive mounting/unmounting of effects
- `useBinding()` for situations where `withAuto` is too invasive
The API reference can be found here:
https://github.com/alloc/wana/wiki/API-Reference
Many of `wana`'s exports are tree-shakeable. 🌲
## Babel Plugins
- `@wana/babel-plugin-with-auto`
**For development only.** It ensures that `withAuto` components appear in the "component stack" printed by React when an error is thrown while rendering. **This makes debugging a lot easier,** but also inflates the size of your application. This plugin produces broken code when used on a production bundle, because it relies on an API that exists only in development.
- `@wana/babel-plugin-add-react-displayname`
A fork of [babel-plugin-add-react-displayname](https://www.npmjs.com/package/babel-plugin-add-react-displayname) that works with Babel 7 and up. It also provides a `callees` option, which means HOCs like `withAuto` are supported. Basically, this plugin sets the `displayName` of your components for you, which makes React Devtools a better experience. It's recommended to use this plugin in both development and production.