Hypb

!NPM
!React
!React Native
!TypeScript
!Vite

> 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

``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!
Feel free to check issues page.

`
npm i @hydevs/hypb
`

How to use it ?

$3

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

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

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

return

;
}
`

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.

$3

> 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) =>

)}

);
};
`

$3

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

function App() {
return (



);
}
`

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 (
<>
loginPB("", "")}>
Login with PocketBase

Logout
{userData &&

userData

}

);
};
`

#### 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;
};
``

$3