Suggest an edit

Quick Start

We recommend everyone start by enabling custom chrome formatters for a much better debugging experience.

image of custom entity chrome console logs

Ok. Let's get going.

Homebase React creates a local relational database for your React app.

Adding HomebaseProvider automatically creates the database.

1import { HomebaseProvider } from 'homebase-react'
2
3const config = { initialData: [{ counter: { id: 1, count: 0 }}] }
4
5const RootComponent = () => (
6  <HomebaseProvider config={config}>
7    <App/>
8  </HomebaseProvider>
9)

Read from and write to that database via hooks.

1import { useCallback } from 'react'
2import { useEntity, useTransact } from 'homebase-react'
3
4const App = () => {
5  const [counter] = useEntity(1)
6  const [transact] = useTransact()
7
8  const handleClick = useCallback(() => {
9    transact([{ counter: { 
10      id: 1, count: counter.get('count') + 1 
11    } }])
12  }, [counter, transact])
13
14  return (
15    <button onClick={handleClick}>
16      Increment 
17      {counter.get('count')}
18    </button>
19  )
20}

For a step by step guide take a look at the tutorial.

Check out the API docs to learn about our other hooks like useQuery and useClient.