# simply-reactive

> A tiny reactive state management library inspired by Recoiljs and Solidjs.

Latest version **6.0.2** (published 2023-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install simply-reactive
pnpm add simply-reactive
yarn add simply-reactive
bun add simply-reactive
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.2 |
| Published | 2023-06-17 |
| First published | 2022-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 148.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Olian04 |
| Maintainers | olian04 |
| Keywords | state management, reactive |

## Links

- npm: https://www.npmjs.com/package/simply-reactive
- Repository: https://github.com/Olian04/simply-reactive
- Homepage: https://github.com/Olian04/simply-reactive#readme
- Issues: https://github.com/Olian04/simply-reactive/issues
- npm.io page: https://npm.io/package/simply-reactive

## Recent versions

- 6.0.2 (latest) — 2023-06-17
- 6.0.1 — 2023-06-09
- 6.0.0 — 2023-06-09
- 5.0.2 — 2023-03-15
- 5.0.1 — 2023-03-15
- 5.0.0 — 2023-03-15
- 4.1.0 — 2023-02-02
- 4.0.0 — 2022-11-28
- 3.0.0 — 2022-11-27
- 2.1.0 — 2022-11-13
- 2.0.4 — 2022-11-13
- 2.0.3 — 2022-11-13
- 2.0.2 — 2022-11-13
- 2.0.1 — 2022-11-13
- 2.0.0 — 2022-11-12
- … 3 more at https://npm.io/package/simply-reactive/versions

## README

[![Latest released version](https://img.shields.io/npm/v/simply-reactive)](https://www.npmjs.com/package/simply-reactive)
[![Minified and gzipped bundle size](https://img.shields.io/bundlephobia/minzip/simply-reactive)](https://bundlephobia.com/package/simply-reactive)
![Type support](https://img.shields.io/npm/types/simply-reactive)
[![Downloads from NPM](https://img.shields.io/npm/dm/simply-reactive?label=downloads%20npm)](https://www.npmjs.com/package/simply-reactive)
[![Downloads from JSDeliver](https://img.shields.io/jsdelivr/npm/hm/simply-reactive?label=downloads%20jsDelivr)](https://www.jsdelivr.com/package/npm/simply-reactive)
[![Build status of main branch](https://img.shields.io/circleci/build/github/Olian04/simply-reactive/main?label=test%20%26%20build)](https://app.circleci.com/pipelines/github/Olian04/simply-reactive)
[![Code percentage covered by tests on main branch](https://codecov.io/gh/Olian04/simply-reactive/branch/main/graph/badge.svg?token=mcsHmshPaF)](https://codecov.io/gh/Olian04/simply-reactive)
[![MIT licensed](https://img.shields.io/npm/l/simply-reactive)](./LICENSE)

# simply-reactive

Simply-reactive is a [small & dependency free](https://bundlephobia.com/package/simply-reactive) reactive state management library inspired by [Solidjs](https://github.com/solidjs/solid) and [Recoiljs](https://github.com/facebookexperimental/Recoil).

## Installation

### NPM

[`npm i simply-reactive`](https://www.npmjs.com/package/simply-reactive)

```ts
import { createAtom, createEffect, createSelector } from 'simply-reactive';
```

### CDN

#### ESM

```html
<script type="module">
  import {
    createAtom,
    createEffect,
    createSelector,
  } from 'https://cdn.jsdelivr.net/npm/simply-reactive';
</script>
```

#### UMD

```html
<script src="https://cdn.jsdelivr.net/npm/simply-reactive/cdn/umd.js"></script>
<script>
  const { createAtom, createEffect, createSelector } = simplyReactive;
</script>
```

## Demos

- Counting with Atoms & Selectors: [demos/count.ts](./demos/count.ts)
- Counting with Groups: [demos/groups.ts](./demos/groups.ts)
- Interactive web page: [demos/web.html](./demos/web.html)
- Simple web app: https://jsfiddle.net/06xo19v2/39
- Simple web app with [easy-render](https://github.com/Olian04/easy-render): <https://jsfiddle.net/20crm4ah/>
- Simple web app with [brynja](https://github.com/Olian04/brynja): <https://jsfiddle.net/rb4xc25f/47/>

## Documentation

`Simply-reactive` provides three reactive primitives:

- [Atoms](#atom) are single pieces of reactive state.
- [Selectors](#selector) are pieces of derived reactive state.
- [Effects](#effect) are side effects produced by changes to the reactive graph.

`Simply-reactive` also provides four reactive composites:

- [Groups](#group) are atoms containing collections of reactive primitives or other reactive composites.
- [Effect Groups](#effect-group) are collections of effects used for enabeling and disabeling multiple effects at once.
- [Resources](#resource) are selectors specifically optimized for data fetching.
- [External Selectors](#external-selector) are selectors specifiacally optimized for interfacing with other reactive systems.

### Atom

Atoms are single pieces of reactive state.

```ts
const Count = createAtom({
  default: 0,
});
Count.set(1);
console.log(`Count: ${Count.get()}`);
```

### Selector

Selectors are pieces of derived reactive state.

```ts
const DoubleCount = createSelector({
  get: () => {
    return Count.get() * 2;
  },
});
console.log(`Count: ${DoubleCount.get()}`);
```

### Effect

Effects are side effects produced by changes to the reactive graph.

```ts
createEffect(() => {
  console.log(`${DoubleCount.get()} is twice as big as ${Count.get()}`);
});

setInterval(() => {
  Count.set((c) => c + 1);
}, 1000);
```

### Group

Groups are atoms containing collections of reactive primitives or other reactive composites.

```ts
const CountGroup = createGroup({
  getDefault: () =>
    createAtom({
      default: 0,
    }),
});

const DoubleCountGroup = createGroup({
  getDefault: (index) =>
    createSelector({
      get: () => CountGroup.find(index).get() * 2,
    }),
});

CountGroup.find(0).set(5);
CountGroup.find(1).set(2);
console.log(DoubleCountGroup.find(0).get()); // 10
console.log(DoubleCountGroup.find(1).get()); // 4
console.log(DoubleCountGroup.find(2).get()); // 0
```

### Effect Group

Effect Groups are collections of effects used for enabeling and disabeling multiple effects at once.

```ts
createEffectGroup([
  () => (document.getElementById('in-a').value = A.get()),
  () => (document.getElementById('in-b').value = B.get()),
  () => (document.getElementById('out-a').innerText = A.get()),
  () => (document.getElementById('out-b').innerText = B.get()),
  () => (document.getElementById('out-product').innerText = A.get() * B.get()),
]);

document.getElementById('in-a').addEventListener('change', (ev) => {
  A.set(parseInt(ev.target.value, 10));
});
document.getElementById('in-b').addEventListener('change', (ev) => {
  B.set(parseInt(ev.target.value, 10));
});
```

### Resource

Resources are selectors specifically optimized for data fetching.

```ts
const Data = createResource({
  get: async () => fetch(...),
});

console.log(`Data after first load ${await Data.get()}`);

Data.invalidate();
console.log(`Data after second load ${await Data.get()}`);
```

### External Selector

External Selectors are selectors specifiacally optimized for interfacing with other reactive systems.

```ts
const Name = createExternalSelector({
  default: '',
  setup: (set) => {
    document
      .querySelector('#input')
      .addEventListener('change', (ev) => set(ev.target.value));
  },
});

createEffect(() => {
  document.querySelector('#output').innerText = `Hello, ${
    Name.get() ?? 'World'
  }!`;
});
```

---
_Source: https://npm.io/package/simply-reactive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._