![\"watch-state](\"https://raw.githubusercontent.com/d8corp/watch-state/v3.3.1/img/logo.svg\"){kind=logo}
\n \n\n \n \n \n
CANT inc. Reactive State Engine
\n\n\n \n ![\"watch-state](\"https://raw.githubusercontent.com/d8corp/watch-state/v3.3.1/img/speed.test.png\") \n \n \n Fast\n \n One of the fastest\n | \n \n \n ![\"watch-state](\"https://raw.githubusercontent.com/d8corp/watch-state/v3.3.1/img/light.svg\") \n \n \n Light\n \n Less than 1 KB gzip\n | \n \n \n ![\"watch-state](\"https://raw.githubusercontent.com/d8corp/watch-state/v3.3.1/img/smart.svg\") \n \n \n Smart\n \n Steady architecture\n |
![](\"https://cdn.worldvectorlogo.com/logos/firefox.svg\")
Firefox | ![](\"https://cdn.worldvectorlogo.com/logos/chrome.svg\")
Chrome | ![](\"https://cdn.worldvectorlogo.com/logos/safari-3.svg\")
Safari | ![](\"https://cdn.worldvectorlogo.com/logos/opera-2.svg\")
Opera | ![](\"https://cdn.worldvectorlogo.com/logos/microsoft-edge-1.svg\")
Edge |\n|:-------:|:------:|:------:|:-----:|:----:|\n| 45+ | 49+ | 9+ | 36+ | 13+ |\n\n### Mobile\n\n| Firefox | Chrome | Safari | Opera |\n|:-------:|:------:|:------:|:-----:|\n| 87+ | 90+ | 9+ | 62+ |\n\n*You can transpile the code to support browsers older than listed above, but performance will decrease.*\n\n## Index\n\n**[ [Install](#install) ]** \n**[ [Usage](#usage) ]** [Simple example](#simple-example) • [Example Vanilla JS](#example-vanilla-js) • [Example React](#example-react) • [Example Innet](#example-innet) \n**[ [Watch](#watch) ]** [Force update of Watch](#force-update-of-watch) • [Destroy Watch](#destroy-watch) • [Deep/Nested Watchers](#deepnested-watchers) \n**[ [State](#state) ]** [Get or Set value](#get-or-set-value) • [State.set](#stateset) • [Force update of State](#force-update-of-state) • [Raw value](#raw-value) • [Initial value](#initial-value) • [Reset value](#reset-value) \n**[ [Compute](#compute) ]** [Lazy computation](#lazy-computation) • [Force update of Compute](#force-update-of-compute) • [Destroy Compute](#destroy-compute) \n**[ [Utils](#utils) ]** [onDestroy](#ondestroy) • [callEvent](#callevent) • [createEvent](#createevent) • [unwatch](#unwatch) \n**[ [Typescript](#typescript) ]** [State type inference](#state-type-inference) • [Compute type inference](#compute-type-inference) \n**[ [Performance](#performance) ]**\n\n## Install\n###### [🏠︎](#index) / Install [↓](#usage)\n\nnpm\n```shell\nnpm i watch-state\n```\n\nyarn\n```shell\nyarn add watch-state\n```\n\nhtml\n```html\n\n```\n\n[minified on GitHub](https://github.com/d8corp/watch-state/blob/master/release/index.min.js)\n\n## Usage\n###### [🏠︎](#index) / Usage [↑](#install) [↓](#watch)\n\n[Simple example](#simple-example) • [Example Vanilla JS](#example-vanilla-js) • [Example React](#example-react) • [Example Innet](#example-innet)\n\nThe library is based on the core concepts of `Observable` (something that can be observed) and `Observer` (something that can observe). On top of these concepts, the core classes `State`, `Compute`, and `Watch` are built according to the following scheme:\n\n```\n ┌────────────┐ ┌─────────────┐\n │ Observable │ │ Observer │\n │ (abstract) │ │ (interface) │\n └──────┬─────┘ └──────┬──────┘ \n ┌────┴─────┐ ┌──────┴───┐\n┌────┴────┐ ┌───┴─┴───┐ ┌────┴────┐\n│ State │ │ Compute │ │ Watch │\n└─────────┘ └─────────┘ └─────────┘\n```\n\n### Simple example\n###### [🏠︎](#index) / [Usage](#usage) / Simple example [↓](#example-vanilla-js)\n\nYou can create an instance of `State` and **watch** its **value**.\n\n```javascript\nimport { Watch, State } from 'watch-state'\n\nconst count = new State(0)\n\nnew Watch(() => console.log(count.value))\n// logs: 0\n\ncount.value++\n// logs: 1\n\ncount.value++\n// logs: 2\n```\n\n### Example Vanilla JS\n###### [🏠︎](#index) / [Usage](#usage) / Example Vanilla JS [↑](#simple-example) [↓](#example-react)\n\nSimple reactive state without build tools or framework dependencies.\n\n```html\n\n\n\n \n ![\"watch-state](\"https://img.shields.io/npm/v/watch-state.svg\")
\n ![\"watch-state](\"https://img.shields.io/npm/dm/watch-state.svg\")
\n ![\"watch-state](\"https://img.badgesize.io/https:/cdn.jsdelivr.net/npm/watch-state?compression=gzip\")
\n ![\"TypeScript\"](\"https://img.shields.io/npm/types/watch-state\")
\n ![\"watch-state](\"https://packagequality.com/shield/watch-state.svg\")
\n ![\"watch-state](\"https://img.shields.io/npm/l/watch-state\")
\n ![\"watch-state](\"https://img.shields.io/badge/Changelog-⋮-brightgreen\"){kind=icon}
\n ![\"watch-state](\"https://github.com/d8corp/watch-state/actions/workflows/tests.yml/badge.svg\"){kind=icon}
\n