solid-valtio

 !npm bundle size !NPM

💊 State management in Solid with valtio.

Quick start

Install it:

``bash
npm install valtio solid-valtio
`

Use it:

`tsx
import { proxy, useSnapshot } from 'solid-valtio'

const state = proxy({ count: 0 })

function Counter() {
const snap = useSnapshot(state)
return ++state.count}>{snap.count}
}
`

By default, useSnapshot returns a Solid store. If you want to use signals, you can pass an option to useSnapshot:

`tsx
function Counter() {
const snap = useSnapshot(state, { signal: true })
return ++state.count}>{snap().count}
}
`

You can also use utils like proxyWithComputed:

`tsx
import { proxyWithComputed } from 'valtio/utils'

const state = proxyWithComputed(
{
count: 1,
},
{
doubled: snap => snap.count * 2,
},
)

// Computed values accept custom setters too:
const state2 = proxyWithComputed(
{
firstName: 'Alec',
lastName: 'Baldwin',
},
{
fullName: {
get: snap => ${snap.firstName} ${snap.lastName},
set: (state, newValue) => {
[state.firstName, state.lastName] = newValue.split(' ')
},
},
},
)

// if you want a computed value to derive from another computed, you must declare the dependency first:
const state = proxyWithComputed(
{
count: 1,
},
{
doubled: snap => snap.count * 2,
quadrupled: snap => snap.doubled * 2,
},
)
``

License

MIT