# wana > Easy observable state for React Latest version **0.14.1** (published 2021-10-19) · MIT license · 0 weekly downloads ## Install ```sh npm install wana pnpm add wana yarn add wana bun add wana ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.14.1 | | Published | 2021-10-19 | | First published | 2019-06-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 6 | | Unpacked size | 328 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Alec Larson | | Maintainers | aleclarson | | Keywords | transparent, observable, proxy, reactive, data flow, state management, react-component, component, reactjs, react, hooks, hoc, tiny, mobx | ## Links - npm: https://www.npmjs.com/package/wana - Repository: alloc/wana - npm.io page: https://npm.io/package/wana ## Dependencies (6) - [@alloc/is](https://npm.io/package/@alloc/is.md) ^3.0.0 - [use-memo-one](https://npm.io/package/use-memo-one.md) ^1.1.1 - [@alloc/is-dev](https://npm.io/package/@alloc/is-dev.md) ^1.3.1 - [react-layout-effect](https://npm.io/package/react-layout-effect.md) ^1.0.1 - [react-batched-updates](https://npm.io/package/react-batched-updates.md) ^1.0.1 - [@alloc/queue-microtask](https://npm.io/package/@alloc/queue-microtask.md) ^1.1.5 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.14.1 (latest) — 2021-10-19 - 0.14.0 — 2021-10-18 - 0.13.20 — 2021-10-17 - 0.13.19 — 2021-10-14 - 0.13.18 — 2021-10-14 - 0.13.17 — 2021-09-23 - 0.13.16 — 2021-09-22 - 0.13.15 — 2021-09-19 - 0.13.14 — 2021-08-13 - 0.13.13 — 2021-08-10 - 0.13.12 — 2021-08-10 - 0.13.11 — 2021-05-12 - 0.13.10 — 2021-04-11 - 0.13.9 — 2021-04-11 - 0.13.8 — 2020-07-07 - … 74 more at https://npm.io/package/wana/versions ## README # wana [![npm](https://img.shields.io/npm/v/wana.svg)](https://www.npmjs.com/package/wana) [![Build status](https://travis-ci.org/alloc/wana.svg?branch=master)](https://travis-ci.org/alloc/wana) [![codecov](https://codecov.io/gh/alloc/wana/branch/master/graph/badge.svg)](https://codecov.io/gh/alloc/wana) [![Bundle size](https://badgen.net/bundlephobia/min/wana)](https://bundlephobia.com/result?p=wana) [![Code style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](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.   ## Donate If you love this library, please donate! I have no income currently, because I'm working full-time on a startup. Any amount is greatly appreciated. 🥰 - ETH: **0xa446626195bbe4d0697e729c1433a86fB6Cf66cF** - BTC: **17vYtAUPKXzubMEnNcN8SiuFgicrd5Rp9A** - KIN: **GBU7RDRD7VDVT254RR6PGMBJESXQVDHJ5CGGODZKRXM2P4MP3G5QSAMH** --- _Source: https://npm.io/package/wana · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._