dexie-hooks

dexie-hooks

Dexie hooks make it easy to use Dexie in React. If you're using Dexie.Observable they will respond to changes to the database.

• useTable(db.table) - uses an entire table.
• useItem(db.table, id) - uses a single item in the table.

import { useTable, useItem } from 'dexie-hooks';
import db from './my/db';

const AllUsersComponent: React.FC = props => {
    const [allUsers, loading, error] = useTable(db.users);

    if (loading) {
        return <Spinner />;
    }

    if (error) {
        return <div>{error.message}</div>;
    }

    return (
        <ul>
            {allUsers.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
};

const OneUserComponent: React.FC = props => {
    const [user, loading, error] = useItem(db.users, props.userId);

    if (loading) {
        return <Spinner />;
    }

    if (error) {
        return <div>{error.message}</div>;
    }

    return (
        <div>
            <img src={user.image} /> {user.name}
        </div>
    );
};