@solid-hooks/dollar
object style solid.js primitives
Install
npm i @solid-hooks/atom
yarn add @solid-hooks/atom
pnpm add @solid-hooks/atom
Usage
$
object wrapper for createSignal
import { $ } from '@solid-hooks/atom'
const data = $(0)
console.log(data()) // 0
console.log(data.$set(1)) // set value
$$
untrack
alias
$memo
object wrapper for createMemo
import { $, $memo } from '@solid-hooks/atom'
const test = $('test')
const memo = $memo(() => `value: ${test()}`, { value: 'test' })
$store
object wrapper for createStore
import { $store } from '@solid-hooks/atom'
const store = $store({ test: { deep: 1 } })
store() // { test: { deep: 1 } }
store.$set('test', 'deep', 2) // set value
$resource
object wrapper for createResource
import { $, $resource } from '@solid-hooks/atom'
const fetcher = (source: string) => Promise.resolve(`${source} data`)
const source = $('source')
const data = $resource(source, fetcher, {
initialValue: 'test'
})
data() // 'test'
data.loading // true
data.state // pending
await Promise.resolve()
data() // 'source data'
data.loading // false
data.state // ready
data.$mutate()
data.$refetch()
$effect
normal effect, alias for createEffect
$effectRendered
run effect after rendered, be able to access DOM, alias for createRenderEffect
$effectInstant
run effect instantly, alias for createComputed
$deferred
defer update notification until browser idle, alias for createDeferred
$selector
object wrapper for createSelector
import { For } from 'solid-js'
import { $selector } from '@solid-hooks/atom'
const activeId = $selector(0)
activeId.$set(1)
return (
<For each={list()}>
{item => (
<li classList={{ active: activeId.$bind(item.id) }}>
{item.name}
</li>
)}
</For>
)