Loading LiveStore...
- {{ todo.text }}
| Dark PNG | Dark SVG | Light PNG | Light SVG |
|---|---|---|---|
|
|
|
|
{value}
}
```
#### Solid
```ts
import { query } from '@livestore/solid'
const MyComponent = () => {
const value = query(state$)
return {value}
}
```
### Reacting to changing variables passed to queries
If your query depends on a variable passed in by the component, use the deps array to react to changes in this variable.
```ts
const todos$ = ({ showCompleted } ) => queryDb((get) => {
return tables.todos.where(showCompleted ? { completed: true } : {})
}, {
label: 'todos$',
deps: [showCompleted] // 👈 add to deps array
})
const MyComponent = ({ showCompleted }) => {
const todos = store.useQuery(todos$({ showCompleted }))
return {todos.length} Done
}
```
## Further reading
- [Riffle](https://riffle.systems/essays/prelude/): Building data-centric apps with a reactive relational database
- [Adapton](http://adapton.org/) / [miniAdapton](https://arxiv.org/pdf/1609.05337)
## Related technologies
- [Signia](https://signia.tldraw.dev/): Signia is a minimal, fast, and scalable signals library for TypeScript developed by TLDraw.
# [Custom Elements](https://dev.docs.livestore.dev/reference/framework-integrations/custom-elements/)
## Overview
import { Code } from '@astrojs/starlight/components';
import customElementsCode from '../../../../../../examples/standalone/web-todomvc-custom-elements/src/main.ts?raw'
LiveStore can be used with custom elements/web components.
## Example
See [examples](/examples) for a complete example.
...
}
```
### useQuery
```tsx
import { useStore } from '@livestore/react'
const query$ = tables.todos.query.where({ completed: true }).orderBy('createdAt', 'desc')
const CompletedTodos = () => {
const { store } = useStore()
const todos = store.useQuery(query$)
return {todos.map((todo) =>
}
```
### useClientDocument
```tsx
import { useStore } from '@livestore/react'
const TodoItem = ({ id }: { id: string }) => {
const { store } = useStore()
const [todo, updateTodo] = store.useClientDocument(tables.todos, id)
return {todo.text}
)} updateTodo({ text: 'Hello, world!' })}>{todo.text}
}
```
## Usage with ...
### Vite
LiveStore works with Vite out of the box.
### Tanstack Start
LiveStore works with Tanstack Start out of the box.
### Expo / React Native
LiveStore has a first-class integration with Expo / React Native via `@livestore/adapter-expo`.
### Next.js
Given various Next.js limitations, LiveStore doesn't yet work with Next.js out of the box.
## Technical notes
- `@livestore/react` uses `React.useState` under the hood for `useQuery` / `useClientDocument` to bind LiveStore's reactivity to React's reactivity. Some libraries are using `React.useExternalSyncStore` for similar purposes but using `React.useState` in this case is more efficient and all that's needed for LiveStore.
- `@livestore/react` supports React Strict Mode.
# [Solid integration](https://dev.docs.livestore.dev/reference/framework-integrations/solid-integration/)
## Overview
import { Code } from '@astrojs/starlight/components';
import solidStoreCode from '../../../../../../examples/standalone/web-todomvc-solid/src/livestore/store.tsx?raw'
import solidMainSectionCode from '../../../../../../examples/standalone/web-todomvc-solid/src/components/MainSection.tsx?raw'
## Example
See [examples](/examples) for a complete example.
Loading LiveStore...
- {{ todo.text }}