Valdres

Quick Start with Solid

Install

npm install valdres valdres-solid

Create your first atom

// store.ts
import { atom } from "valdres"

export const countAtom = atom(0)

Use it in a component

import { createAtom } from "valdres-solid"
import { countAtom } from "./store"

function Counter() {
    const [count, setCount] = createAtom(countAtom)

    return (
        <div>
            <p>Count: {count()}</p>
            <button onClick={() => setCount(c => c + 1)}>Increment</button>
        </div>
    )
}

Provide a store

Wrap your app with ValdresProvider:

import { ValdresProvider } from "valdres-solid"

function App() {
    return (
        <ValdresProvider>
            <Counter />
        </ValdresProvider>
    )
}

Read-only values

Use createValue when you only need to read:

import { createValue } from "valdres-solid"
import { countAtom } from "./store"

function Display() {
    const count = createValue(countAtom)
    return <p>The count is {count()}</p>
}

Next steps