npm package: @hydevs/hypb
Description: <img src="https://github.com/Hydevs-Corp/Hypb/blob/9308ab4c17196e5c0083c983a528326fd2cba867/.github/assets/banner.png" alt="usehooks-ts banner" align="center" />
Latest version: 0.0.28

<img src="https://github.com/Hydevs-Corp/Hypb/blob/9308ab4c17196e5c0083c983a528326fd2cba867/.github/assets/banner.png" alt="usehooks-ts banner" align="center" />

# Hypb

![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)

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

<a href="https://pocketbase.io/" style="display:flex; align-items:center; gap: 15px;">
<img src="https://pocketbase.io/images/logo.svg" />
PocketBase
</a>

## Summary

-   [Hypb](#hypb)
    -   [Summary](#summary)
    -   [Install](#install)
    -   [Authors](#authors)
    -   [🤝 Contributing](#-contributing)
    -   [How to use it ?](#how-to-use-it-)
        -   [1. Initialize Pocketbase Config](#1-initialize-pocketbase-config)
        -   [2. Collections and Records Hooks](#2-collections-and-records-hooks)
        -   [3. AuthProvider \& AuthHooks](#3-authprovider--authhooks)
            -   [Notes](#notes)
        -   [4.](#4)

## Install

```sh
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!<br />Feel free to check [issues page](https://github.com/Hydevs-Corp/Hypb/issues).

```
npm i @hydevs/hypb
```

## How to use it ?

### 1. Initialize Pocketbase Config

You can either use your PocketBase url :

```jsx
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

```jsx
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](https://pocketbase.io/docs/)

```jsx
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

```jsx
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

```ts
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

```tsx
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={logoutPB}> Logout </button>
            {userData && <p>userData</p>}
        </>
    );
};
```

#### Notes

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

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

### 4.