use-gun's Introduction

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.

import React, { FC } from "react";
import { GunProvider } from "use-gun";

const App: FC = ({ children }) => {
    const peers = ["https://events.mydomain.com"];

    return (
        <GunProvider peerUrls={peers}>
            <div className="my-app"><MyComponent /></div>
        </GunProvider>
    );
};

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.

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 (
        <div className="my-component">
            <button onClick={onButtonClick}>Disconnect Gun</button>
        </div>
    );
};

useGunWatch

A React hook for listening to changes on a property and providing the ability to unsubscribe.

import React, { FC } from "react";
import { useGunWatch } from "use-gun";

const MyComponent: FC = () => {
    const [value, unsubscribe] = useGunWatch("my-key", 0);
    const [otherValue, unsubscribeOtherValue] = useGunWatch<string>("my-other-key");

    const onButtonClick = () => {
        unsubscribe();
    };

    return (
        <div className="my-component">
            <strong>{value}</strong>
            <button onClick={onButtonClick}>Unsubscribe Key</button>
        </div>
    );
};