https://github.com/clarktozer/use-gun
React Hooks for GunDB
https://github.com/clarktozer/use-gun
gundb react typescript
Last synced: 3 days ago
JSON representation
React Hooks for GunDB
- Host: GitHub
- URL: https://github.com/clarktozer/use-gun
- Owner: clarktozer
- License: mit
- Created: 2020-11-19T10:10:11.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-24T04:55:08.000Z (over 4 years ago)
- Last Synced: 2025-09-17T08:40:21.310Z (27 days ago)
- Topics: gundb, react, typescript
- Language: TypeScript
- Homepage:
- Size: 40 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-gun
[](https://www.npmjs.com/package/use-gun)
React Hooks for GunDB
## GunProvider
A React provider which will allow access to the connect, disconnect functions, and the current gun instance using the "useGun" hook.
```js
import React, { FC } from "react";
import { GunProvider } from "use-gun";
const App: FC = ({ children }) => {
const peers = ["https://events.mydomain.com"];
return (
);
};
```
#### Options:
| option | default | Description |
| --------------- | ------- | --------------------------------------------------------------------- |
| peerUrls | - | String array of urls for each. peer |
| connectOnMount? | false | Automatically call the connect function when the provider is mounted. |
## useGun
A React context for getting the connect, disconnect functions, and the current gun instance. Will only work if your app is wrapped in the GunProvider.
```js
import React, { FC, useEffect } from "react";
import { useGun } from "use-gun";
const MyComponent: FC = () => {
const { gun, connect, disconnect } = useGun();
useEffect(() => {
connect();
}, []);
const onButtonClick = () => {
disconnect();
};
return (
Disconnect Gun
);
};
```
## useGunWatch
A React hook for listening to changes on a property and providing the ability to unsubscribe.
```js
import React, { FC } from "react";
import { useGunWatch } from "use-gun";
const MyComponent: FC = () => {
const [value, unsubscribe] = useGunWatch("my-key", 0);
const [otherValue, unsubscribeOtherValue] = useGunWatch("my-other-key");
const onButtonClick = () => {
unsubscribe();
};
return (
{value}
Unsubscribe Key
);
};
```
#### Options:
| option | default | Description |
| ------------- | ------- | ------------------------------------------------------------------- |
| key | - | Key for property to listen to. |
| initialValue? | - | Inital state value. If not value is passed, a generic can be added. |