@hydevs/hypb

Hypb

React hooks and utils for the user-friendly database and API solution :

PocketBase

Summary

• Hypb
  • Summary
  • Install
  • Authors
  • 🤝 Contributing
  • How to use it ?
    • 1. Initialize Pocketbase Config
    • 2. Collections and Records Hooks
    • 3. AuthProvider & AuthHooks
      • Notes
    • 4.

Install

npm i @hydevs/hypb

Authors

Hypb was made and is maintained by Louis Réville 🇫🇷 and and Guillaume Maugin 🇫🇷 to simplify starting and developping webapps.

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

npm i @hydevs/hypb

How to use it ?

1. Initialize Pocketbase Config

You can either use your PocketBase url :

import { Hypb } from "@hydevs/hypb";

Hypb.initPB("https://urlToYourPb.io/", {
    autoCancelation: false /* default: true */,
    userCollection: "users" /* default: "_pb_users_auth_" */,
});

Or use an existing PocketBase instance

import { Hypb } from "@hydevs/hypb";
import Pocketbase from "pocketbase";

const pb = new Pocketbase("https://urlToYourPb.io/");
pb.autoCancelation(false);

Hypb.initPB("https://urlToYourPb.io/", {
    autoCancelation: true,
    userCollection: "users",
});

Once you've initialized Hypb, you can access the pocketbase object through the Hypb.getPB() method and use it as in the pocketbase documentation

import { Hypb } from "@hydevs/hypb";

function Component() {
    const pb = Hypb.pb;

    return <div></div>;
}

Referencing your PB instance in Hypb is the first prerequisite to let you use our hooks and utils in your application, by making your pb instance accessible to the entire package.

2. Collections and Records Hooks

useCollection is used to request every entries from a collection, and store the result as a state. Allows also for real time subscriptions.

It supports : loading and invalidates as well as pagination

import { useCollection } from "@hydevs/hypb";

// defining all options
const defaultValue = []; // Default value for your collection
const queryParams = {
    // Specify the params for the request
    filter: "...",
    sort: "...",
};
const pageParams = {
    // Chooses page parameters | Defaults are : page 1 and 50 items per pages
    perPages: 10,
    page: 1,
};
const useCollectionOptions = {
    queryParams,
    pageParams,
    realtime: true, // Allows for realtime subscription
};

const Component = () => {
    const {
        records: notes,
        invalidate, // manualReload
        loading, // true while there's no responses from the db, false otherwise
        params, // actual params
        pageInfos, // page, perPage, totalItems
        setPage, // method to change page, setPage(pageInfos.page + 1)
    } = useCollection < note > ("notes", defaultValue, useCollectionOptions);

    return (
        <>
            {loading
                ? "loading..."
                : notes.map((note) => <div key={node.id}> {note.text} </div>)}
        </>
    );
};

3. AuthProvider & AuthHooks

import { AuthProvider } from "@hydevs/hypb";
import { RecordModel } from "pocketbase";

function App() {
    return (
        <AuthProvider>
            <YourApp />
        </AuthProvider>
    );
}

You can now, anywhere in your app, login, logout, and access to the userData

import { useUserData, loginPB, logoutPB } from "@hydevs/hypb";

const Component = () => {
    const { userData, loading, invalidate: manualReload } = useUserData();

    return (
        <>
            <button onClick={() => loginPB("username", "password")}>
                Login with PocketBase
            </button>
            <button onClick={logout}> Logout </button>
            {userData && <p>userData</p>}
        </>
    );
};

Notes

AuthProvider contains additionnal props that you can find in his AuthProviderProps :

type AuthProviderProps = {
    children: React.ReactNode;
    initialEmptyUser: RecordModel /* default: {} as RecordModel */;
    expand?: string;
};

4.