React integration for ElectricSQL

Electric is Postgres sync for modern apps.

Electric provides an HTTP interface to Postgres to enable massive number of clients to query and get real-time updates to data in "shapes" i.e. subsets of the database. Electric turns Postgres into a real-time database.

This packages exposes a useShape hook for pulling shape data into your React components.

Shapes and ShapeStreams instances are cached globally so re-using shapes in multiple components is cheap.

Install

npm i @electric-sql/react

How to use

Add useShape to a component

import { useShape } from '@electric-sql/react'

export default function MyComponent() {
  const { isLoading, data } = useShape({
    url: 'http://my-api.com/shape',
    params: {
      table: `foo`,
    },
  })

  if (isLoading) {
    return <div>loading</div>
  }

  return (
    <div>
      {data.map((foo) => (
        <div>{foo.title}</div>
      ))}
    </div>
  )
}