Documentation

This package provides everything u need to use RIDB on react easily

Install

npm i @trust0/ridb-react

Usage

typescript
1
2
import React from 'react'
import { Database, useDatabase, DatabaseProvider } from '@trust0/ridb-react'

Create your schemas and type them for better inference.

typescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const users = {
  version: 0 as const,
  primaryKey: 'id',
  type: SchemaFieldType.object,
  properties: {
      id: {
          type: SchemaFieldType.string,
          maxLength: 60
      }
  }
} as const
const schemas = {
  users: users
}
type DatabaseSchemas = typeof schemas;

Now just create your component and use the useDatabase hook to get the database instance.

typescript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const MyComponent: React.FC = () => {
    const db = useDatabase<DatabaseSchemas>();
    const [isDbReady, setIsDbReady] = React.useState(false);

    React.useEffect(() => {
        const startDb = async () => {
            if (db) {
                await db.start();
                setIsDbReady(true);
            }
        };
        startDb();
    }, [db]);

    if (!db) {
        return <div>No database available</div>;
    }

    if (!isDbReady) {
        return <div>Loading...</div>;
    }

    return (
        <div> <h1>My Component</h1> </div>
    );
};

Wrap your component with the DatabaseProvider component to provide the database instance to your component.

typescript
1
2
3
<DatabaseProvider>
    <MyComponent />
</DatabaseProvider>

All the database methods and operations from RIDB are supported, for more details check the RIDB documentation