Effect CommunityEC
Effect Community•3mo ago•
3 replies
Andres Jimenez Sulbaran

Introducing @effectify/solid-effect-atom: State Management for SolidJS

👋 Hi everyone!

I’d like to introduce @effectify/solid-effect-atom https://www.npmjs.com/package/@effectify/solid-effect-atom—
a small integration inspired by effect-atom/react, but focused on SolidJS 💪

It provides a simple and reactive way to manage state using Effect atoms inside Solid components.

Here’s a quick example 👇

import * as Atom from '@effect-atom/atom/Atom'
import { useAtom, useAtomValue } from '@effectify/solid-effect-atom'

const countAtom = Atom.make(0)
const doubledAtom = Atom.make((get) => get(countAtom) * 2)

function Counter() {
  const [count, setCount] = useAtom(() => countAtom)
  const doubled = useAtomValue(() => doubledAtom)

  return (
    <div>
      <p>Count: {count()}</p>
      <p>Doubled: {doubled()}</p>
      <button onClick={() => setCount(count() - 1)}>−</button>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount(count() + 1)}>+</button>
    </div>
  )
}

Feedback and ideas are welcome 🙌
Would love to hear what you think or if anyone wants to collaborate!
Was this page helpful?