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, the co-author of
react-spring
and immer
. You can support his work by becoming a patron.
o()
for making observable objectsauto()
for reactive effectswhen()
for reactive promisesno()
for unobserved objectsnoto()
for unobserved scopeswatch()
for listening to deep changesshallowChanges()
for listening to shallow changeswithAuto()
for reactive componentsuseAuto()
for easyauto
calls in componentsuseO()
for observable component stateuseDerived()
for observable gettersuseChanges()
for change listenersuseEffects()
for reactive mounting/unmounting of effectsuseBinding()
for situations wherewithAuto
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. 🌲
-
@wana/babel-plugin-with-auto
For development only. It ensures thatwithAuto
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 that works with Babel 7 and up. It also provides acallees
option, which means HOCs likewithAuto
are supported. Basically, this plugin sets thedisplayName
of your components for you, which makes React Devtools a better experience. It's recommended to use this plugin in both development and production.