aej11a/react-userbase

React Hooks for Userbase

react-userbase

React Hooks for Userbase

Install

You need to install Userbase separately from this package

yarn add userbase-js react-userbase

or

npm install userbase-js react-userbase --save

Usage

First, wrap your app with UserbaseProvider like this:

import { UserbaseProvider } from 'react-userbase';

<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 } from "react-userbase";

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

    const username = "aej11a";
    const password = "Password123";

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

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

Example Project

Clone/download the repo locally and add a .env.local file at react-userbase/example/.env.local

In that file, add REACT_APP_USERBASE_APP_ID=<YOUR USERBASE APP ID>

Start the dev server to test. You can see a few different uses of the hook in react-userbase/example/src/App.js

License

MIT © aej11a

---

This hook was created using create-react-hook.

Excellent explanation of the object syntax instead of using an array: vercel/swr#9 (comment)