userbase-react

React Hooks for Userbase

Install

You need to install Userbase separately from this package

yarn add userbase-js userbase-react

or

npm install userbase-js userbase-react

Usage

First, wrap your app with UserbaseProvider like this:

import { UserbaseProvider } from 'userbase-react';

<UserbaseProvider appId={YOUR APP ID FROM USERBASE}>
    <App/>
</UserbaseProvider>

Then, any component within the UserbaseProvider can use the hook.

The hook takes arguments like these:

useUserbase(action, options?)

where action is one of the Userbase functions from their SDK and options is an object of options to pass to the function.

The hook returns an array with a function and an object as shown in the example below.

The generated function will trigger its Userbase function, and the object properties will track that function's state. The generated function also returns its promise.

You can also pass options to the function when you call it, as shown below.

import * as React from "react";
import { useUserbase, useIsSignedIn } from "userbase-react";

const Example = () => {
    const { signedIn } = useCurrentSession()
    const [signIn, { response, loading, error }] = useUserbase("signIn");
    const [
        signOut,
        {
            response: signOutResponse,
            loading: signOutLoading,
            error: signOutError
        }
    ] = useUserbase("signOut");

    const username = "xyclos";
    const password = "Password123";

    useEffect(() => {
        console.log(response, loading, error);
    });

    if (loading) return <LoadingIndicator />;
    return signedIn ? (
        <button onClick={() => signOut()}>Sign Out</button>
    ) : (
        <button onClick={() => signIn({ username, password })}>Sign In</button>
    );
};

License

MIT © xyclos

This hook was created using tsdx.