# retomic

> Retomic is a reactive state management system for React. The idea for this library is based on the idea of [clojure's atoms](https://clojure.org/reference/atoms).

Latest version **0.14.4** (published 2022-01-28) · 0 weekly downloads

## Install

```sh
npm install retomic
pnpm add retomic
yarn add retomic
bun add retomic
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.14.4 |
| Published | 2022-01-28 |
| First published | 2022-01-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 86.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | leland kwong |
| Maintainers | cr8tiv |

## Links

- npm: https://www.npmjs.com/package/retomic
- Repository: https://github.com/Leland-Kwong/retomic
- Homepage: https://github.com/Leland-Kwong/retomic#readme
- Issues: https://github.com/Leland-Kwong/retomic/issues
- npm.io page: https://npm.io/package/retomic

## Dependencies (3)

- [nanoid](https://npm.io/package/nanoid.md) ^3.2.0
- [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0
- [react-json-view](https://npm.io/package/react-json-view.md) ^1.21.3

## Recent versions

- 0.14.4 (latest) — 2022-01-28
- 0.14.3 — 2022-01-27
- 0.14.2 — 2022-01-27
- 0.14.1 — 2022-01-27
- 0.14.0 — 2022-01-27
- 0.13.1 — 2022-01-27
- 0.13.0 — 2022-01-26
- 0.11.2 — 2022-01-26
- 0.11.1 — 2022-01-26
- 0.11.0 — 2022-01-26
- 0.10.0 — 2022-01-25
- 0.9.1 — 2022-01-25
- 0.9.0 — 2022-01-25
- 0.8.2 — 2022-01-25
- 0.8.1 — 2022-01-25
- … 2 more at https://npm.io/package/retomic/versions

## README

# Retomic

Retomic is a reactive state management system for React. The idea for this library is based on the idea of [clojure's atoms](https://clojure.org/reference/atoms).

## Installation

The Retomic package lives in [npm](https://www.npmjs.com/get-npm). To install the latest stable version, run the following command:

```shell
npm install retomic
```

## Usage

### `RetomicRoot`

Retomic includes a `RetomicRoot` component which creates a single object tree for the application state.

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <RetomicRoot>
    <App />
  </RetomicRoot>,
  rootElement
)
```

### Atoms

Retomic atoms are slices of your state accessed based on their `key` property.

```js
import { atom } from 'retomic'

export const counterAtom = atom({
  key: 'counter',
  defaultState: 0
})
```

### Hooks

Retomic provides a pair of hooks for reading and writing data to your atoms.

`useRead` reads a value from an atom and watches for updates while `useSend` returns a `send` function to send updates via update functions.

```js
import { useRead, useSend } from 'retomic'
import { counterAtom } from './counter-atom'

const increment = (state, x) => state + x
const decrement = (state, x) => state - x

function Counter() {
  const count = useRead(counterAtom, d => d)
  const send = useSend(counterAtom)

  return (
    <div>
      <button
        aria-label="Increment value"
        onClick={() => send(increment, 1)}
      >
        +
      </button>
      <span className={styles.value}>{count}</span>
      <button
        aria-label="Decrement value"
        onClick={() => send(decrement, 1)}
      >
        -
      </button>
    </div>
  )
}
```

## API

### `atom`

```ts
type atom({
  key,
  defaultState,
  resetOnInactive
}: {
  key: string,
  defaultState: any,
  resetOnInactive?: boolean
})
```

### `useRead`

```ts
useRead<T>(
  atom: Atom<T>,
  selector: SelectorFn<T, SelectorValue>,
  isEqualFn: IsEqualFn<SelectorValue> = shallowEqual
)
```

### `useSend`

```ts
useSend<T>(atom: Atom<T>):
  <Payload>(
    updateFn: UpdateFn<T, Payload>,
    payload: Payload
  ): void
```

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