react-userbase
v1.10.3
Published
React Hooks for Userbase
Downloads
11
Readme
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: https://github.com/zeit/swr/issues/9#issuecomment-547224457