@hydevs/hypb
Version:
<img src="https://github.com/Hydevs-Corp/Hypb/blob/9308ab4c17196e5c0083c983a528326fd2cba867/.github/assets/banner.png" alt="usehooks-ts banner" align="center" />
189 lines (143 loc) • 5.31 kB
Markdown
<img src="https://github.com/Hydevs-Corp/Hypb/blob/9308ab4c17196e5c0083c983a528326fd2cba867/.github/assets/banner.png" alt="usehooks-ts banner" align="center" />
# Hypb
> 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 /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 /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.