useClientDocument

Similar to React.useState but returns a tuple of [state, setState, id, query$] for a given table where …

state is the current value of the row (fully decoded according to the table schema)
setState is a function that can be used to update the document
id is the id of the document
query$ is a LiveQuery that e.g. can be used to subscribe to changes to the document

useClientDocument only works for client-document tables:

const MyState = State.SQLite.clientDocument({
  name: 'MyState',
  schema: Schema.Struct({
    showSidebar: Schema.Boolean,
  }),
  default: { id: SessionIdSymbol, value: { showSidebar: true } },
})

const MyComponent = () => {
  const [{ showSidebar }, setState] = useClientDocument(MyState)
  return (
    <div onClick={() => setState({ showSidebar: !showSidebar })}>
      {showSidebar ? 'Sidebar is open' : 'Sidebar is closed'}
    </div>
  )
}

If the table has a default id, useClientDocument can be called without an id argument. Otherwise, the id argument is required.

Call Signature

useClientDocument<TTableDef>(table, id?, options?): UseStateResult<TTableDef>

Defined in: packages/@livestore/react/src/useClientDocument.ts:52

Type Parameters

• TTableDef extends Trait<any, any, any, { default: { id: string | typeof SessionIdSymbol; value: any; }; partialSet: boolean; }>

Parameters

table

TTableDef

id?

typeof SessionIdSymbol | DefaultIdType<TTableDef>

options?

Partial<GetOrCreateOptions<TTableDef>>

Returns

UseStateResult<TTableDef>

Call Signature

useClientDocument<TTableDef>(table, id, options?): UseStateResult<TTableDef>

Defined in: packages/@livestore/react/src/useClientDocument.ts:66