# reatom-solid

> Solid bindings for @reatom/core

Latest version **2.0.1** (published 2023-10-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install reatom-solid
pnpm add reatom-solid
yarn add reatom-solid
bun add reatom-solid
```

## 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 | 2.0.1 |
| Published | 2023-10-20 |
| First published | 2020-05-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Dmitriy Skrylnikov |
| Maintainers | dskrylnikov |
| Keywords | reatom, solid, state, store, flux, atom, reactive, reactivity, state-manager, state manager, hooks |

## Links

- npm: https://www.npmjs.com/package/reatom-solid
- Repository: https://github.com/skrylnikov/reatom-solid
- Issues: https://github.com/skrylnikov/reatom-solid/issues
- npm.io page: https://npm.io/package/reatom-solid

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2023-10-20
- 2.0.0-2 (next) — 2021-08-29
- 2.0.0 — 2021-08-29
- 2.0.0-1 — 2021-08-29
- 2.0.0-0 — 2021-08-29
- 1.0.0 — 2021-07-30
- 0.2.0-1 — 2021-07-30
- 0.2.0-0 — 2021-07-30
- 0.1.1-1 — 2020-05-11
- 0.1.1-0 — 2020-05-11
- 0.1.0 — 2020-05-11
- 0.0.1 — 2020-05-11

## README

# reatom-solid

[Solid](https://github.com/ryansolid/solid) bindings package for [Reatom](https://github.com/artalar/reatom) store.

# 🚫 Deprecated❗️❗️❗️
Please use [official adapter](https://www.reatom.dev/adapter/npm-solid-js/)

## Install

```
npm i reatom-solid
```

or

```sh
yarn add reatom-solid
```

> `reatom-solid` depends on and works with `@reatom/core` and `solid-js`.

## Hooks Api

### useAtom

Connects the atom to the store represented in context and returns the state of the atom from the store (or default atom state).

#### Basic (useAtom)

```ts
const [atomValue] = useAtom(atom)
```

#### Depended value by selector

```ts
const atomValue = useAtom(atom, atomState => atomState[props.id])
const atomValue = createMemo(() => {
    const atom = createAtom({ dataAtom }, ({ get }) => get("dataAtom")[props.id]);
    const [value] = useAtom(atom);
    return value;
});
```

### useAction

Binds action with dispatch to the store provided in the context.

#### Basic (useAction)

```ts
const handleUpdateData = useAction(dataAtom.update)
```

#### Prepare payload for dispatch

```ts
const handleUpdateData = useAction((value) => dataAtom.update({ id: props.id, value }))
```

#### Conditional dispatch

If action creator don't return an action dispatch not calling.

```ts
const handleUpdateData = useAction((payload) => {
  if (condition) return dataAtom.update(payload)
})
```

## Usage

### Step 0 - OPTIONAL. Create store

```jsx
// App

import { createStore } from '@reatom/core'
import { reatomContext } from 'reatom-solid'
import { Form } from './components/Form'

import './App.css'

export const App = () => {
  // create statefull context for atoms execution
  const store = createStore()

  return (
    <div className="App">
      <reatomContext.Provider value={store}>
        <Form />
      </reatomContext.Provider>
    </div>
  )
}
```

### Step 1. Bind your atoms.

```jsx
// components/Form

import { createPrimitiveAtom } from '@reatom/core/primitives'
import { useAtom } from 'reatom-solid'

const nameAtom = createPrimitiveAtom('', {
  onChange: (e) => e.currentTarget.value,
})

export const Form = () => {
  const [name, { onChange }] = useAtom(nameAtom)

  return (
    <form>
      <label htmlFor="name">Enter your name</label>
      <input id="name" value={name} onChange={onChange} />
    </form>
  )
}
```


### Demo

[Codesandbox](https://codesandbox.io/s/reatom-solid-example-9u7pj?file=/index.js)

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