Documentation

This package provides everything you need to use RIDB with React easily

Install

npm i @trust0/ridb-react

Usage

import React from 'react'
import { RIDBDatabase, useRIDB } from '@trust0/ridb-react'
import { SchemaFieldType } from '@trust0/ridb'

Create your schemas and type them for better inference.

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 useRIDB hook to get the database instance.

const MyComponent: React.FC = () => {
    const db = useRIDB<DatabaseSchemas>();
    const [isDbReady, setIsDbReady] = React.useState(false);

    React.useEffect(() => {
       if (!isDbReady) {
        db.start()
         .then(() => {
          setIsDbReady(true);
         })
         .catch((err) => {
          console.error(err);
         });
       }
    }, [isDbReady]);

    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 RIDBDatabase component to provide the database instance to your component.

<RIDBDatabase dbName="myDB" schemas={schemas}>
    <MyComponent />
</RIDBDatabase>

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