​
useBasic

The useBasic hook is used to access the database and other Basic features.

Any of these properties can be accessed by destructuring the useBasic hook.

​
db

​
db
json

The database object, which you can use to read, add, update, and delete items

​
dbStatus

​
dbStatus
string

Fetches the status of the database. Possible values are:

  • DB starts with 'LOADING'

  • Then it goes to 'CONNECTING'

  • If it connects successfully, it goes to 'ONLINE'

  • If there’s a non-fatal error, it goes to 'ERROR_WILL_RETRY'. If there’s a fatal error, it goes to 'ERROR'

  • But if it’s just offline then 'OFFLINE'

    App.tsx
    import { useBasic } from '@basictech/react'

function App() {
  const { dbStatus } = useBasic()

  console.log("Check database status: ", dbStatus)

  return (
    <>
      {/* render items */}
    </>
  )
}

​
user

​
user
json

Fetches the user object containing the user’s ID, email, and name

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { user } = useBasic()

  console.log("Fetch user ID: ", user.id)
  console.log("Fetch user email: ", user.email)
  console.log("Fetch user name: ", user.name)

  return (
    <>
      {/* render items */}
    </>
  )
}

​
getToken

​
getToken
async function

Fetches the user’s JWT token, returns a promise. Since it is an async function, you can use it with await or .then().

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { getToken } = useBasic()

  return (
    <>
      <button onClick={async () => console.log(await getToken())}>Get token</button>
    </>
  )
}

​
signin

​
signin
function

Function to sign a user in via the Basic OAuth flow. It will redirect the user to the Basic login page, and then redirect them back to the page they were on.

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { signin } = useBasic()

  return (
    <>
      <button onClick={signin}>Sign in</button>
    </>
  )
}

​
signout

​
signout
function

Function to sign a user out. User remains on your page after signing out, but isSignedIn will be set to false until they sign in again.

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { signout } = useBasic()

  return (
    <>
      <button onClick={signout}>Sign out</button>
    </>
  )
}

​
isAuthReady

​
isAuthReady
boolean

Boolean that can be used as a loading state for your app while auth is being verified. isAuthReady is only triggered upon first render, and not triggered again when the user signs in or out.

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { isAuthReady } = useBasic()

  return (
    <>
      {isAuthReady ? <div>isSignedIn is ready to be used</div> : <div>Loading...</div>}
    </>
  )
}

​
isSignedIn

​
isSignedIn
boolean

Boolean that checks if a user is signed in after the isAuthReady boolean is true.

App.tsx
import { useBasic } from '@basictech/react'

function App() {
  const { isAuthReady, isSignedIn } = useBasic()

  return (
    <>
      {isAuthReady ? 
      <div>{isSignedIn ? "User is signed in" : "User is signed out"}</div>} :
      <div>Loading...</div>
    </>
  )
}

​
useQuery

The useQuery hook is used to “subscribe” to data from the database, so that it updates when the data changes. It’s a listener for data, and enables automatic sync between the local database, users’ devices, and all other users that are connected to the same database.

We use it primarily to wrap our .get() and .getAll() functions, and it takes a function as an argument.

import { useBasic, useQuery } from '@basictech/react'

function App() {
  const { db } = useBasic()

  // Example 1: Fetch a single item from the table
  const item = useQuery(() => db.collection('tablename').get('ID_OF_ITEM'))

  // Example 2: Fetch all items from the table
  const items = useQuery(() => db.collection('tablename').getAll())

  return (
    // render items
  )
}