Skip to content
Reatom

npm-solid-js

This is the binding for the Solid↗ view framework. The reason to use these bindings is the Reatom ecosystem. We have a lot of packages and helpers to handle basic UI logic, including network caching, data persistence, and complex flow description.

Installation

#
Terminal window
npm i @reatom/npm-solid-js

Also, you need to be installed @reatom/core or @reatom/framework and solid-js.

Read the core docs first for production usage.

Usage

#

Try it now: https://stackblitz.com/edit/reatomnpm-solid-js?file=src%2FApp.tsx↗

Setup reatomContext

#

The first time, you need to add the Reatom provider to the root of your application.

import { createCtx, connectLogger } from '@reatom/framework'
import { reatomContext } from '@reatom/npm-solid-js'


const ctx = createCtx()
connectLogger(ctx)


render(
  () => (
    <reatomContext.Provider value={ctx}>
      <App />
    </reatomContext.Provider>
  ),
  document.getElementById('root')!,
)

useAtom hook

#

Now you will be able to use Reatom hooks.

import { atom } from '@reatom/framework'
import { useAtom } from '@reatom/npm-solid-js'


const countAtom = atom(0, 'countAtom')


const App: Component = () => {
  const [count, setCount] = useAtom(countAtom)


  return (
    <div>
      Count value is
      <button onClick={() => setCount((c) => c + 1)}>{count()}</button>
    </div>
  )
}

useCtx hook

#

If you need to get the ctx from the context, you could use the shortcut hook useCtx. With ctx in the component body, you can manipulate subscriptions more flexibly with Solid’s onMount, onCleanup, and so on.

Examples

#

Dynamic atom creation

#

This example shoes how to use atomization to improve editable fields performance, persists it to localStorage.

https://stackblitz.com/edit/reatomnpm-solid-js-mssqxj?file=src/model.ts,src/App.tsx↗