homebase-react

A React client for the @braustin-holdings/homebase-node-sdk.

This package will obtain a JSONwebtoken from Homebase and provide you a React Context which contains a pre-configured fetch request which you can use to make GraphQL requests to Homebase.

Installation

1. Make sure @braustin-holdings/homebase-node-sdk is installed and configured on your server.
2. npm i @braustin-holdings/homebase-react

Usage

Import the HomeBaseCtxProvider and wrap it around the components that will need access to HB. This may be around your entire app.

1. Wrap your components in the Provider

import { HomebaseProvider } from '@braustin-holdings/homebase-react';
 
const App = () => {
  <HomebaseProvider>
    {/* ... */}
  </HomebaseProvider>
}

NOTE: If your server is at a different URL, you can specify the serverUrl prop on the HomebaseProvider:

<HomebaseProvider serverUrl={process.env.REACT_APP_BRAUSTIN_SERVER_URL}>

2. Use the useHomebase hook in consumer components

This will allow you to make authenticated graphQL calls using the homebaseGQL function.

import { useHomebase, GET_HOMES } from "@braustin-holdings/homebase-react"
import { useEffect, useState } from "react"

const HomeBaseClient = () => {
  const { homebaseGQL } = useHomebase()
  const [homes, setHomes] = useState([])

  useEffect(() => {
    getHomes()
  }, [])

  const getHomes = async () => {
    const res = await homebaseGQL(GET_HOMES)
    setHomes(res.data.homes)
  }

  return (
    <>
      <h3>Homes</h3>
      <pre>{JSON.stringify(homes, null, 2)}</pre>
    </>
  )
}