React hooks for y-query

This library provides React hooks for watching y-query data. Under the hood, this is a relatively simple wrapper on top of React's useSyncExternalStore

Installation

npm install @bensku/y-query-react

Usage

Watch changes to queried data:

const filter = useMemo(() => any<YourRow>(), []);
const rows = useQuery(doc, YourTable, filter, 'content');

return <ul>
        {rows.map(row => <ul key={row.key}>{row.description}</ul>)}
    </ul>;

Or watch a single row:

const row = useRow(doc, YourTable, YourRow, 'content');

A fully working example application is available at /examples/react-notepad.