React

React hooks for Polybase DB.

Install Polybase DB React

npm install @polybase/react

React + Polybase DB Client

There are React hooks and providers for Polybase DB Client, designed to be use with @polybase/client (opens in a new tab).

Add Polybase Provider

import * as React from "react";
import { PolybaseProvider } from "@polybase/react";
import { Polybase } from "@polybase/client";
 
const polybase = new Polybase();
 
export const App = () => {
  return (
    <PolybaseProvider polybase={polybase}>
      {/* ... your app routes */}
    </PolybaseProvider>
  );
};

Read a record (with updates)

ℹ️

<PolybaseProvider> must be a parent component.

import * as React from "react";
import { usePolybase, useDocument } from "@polybase/react";
 
export const Component = () => {
  const polybase = usePolybase();
  const { data, error, loading } =
    useDocument<OptionalCustomType>(polybase.collection("users").record("id"));
 
  return data.data.name;
};

List collection records (with updates)

ℹ️

<PolybaseProvider> must be a parent component.

import * as React from "react";
import { usePolybase, useCollection } from "@polybase/react";
 
export const Component = () => {
  const polybase = usePolybase();
  const { data, error, loading } =
    useCollection<OptionalCustomType>(polybase.collection("users"));
 
  const usersEl = map(data, ({ data }) => {
    return <div key={data.id}>{data.name}</div>;
  });
 
  return usersEl;
};

React + Polybase DB Auth

There are React hooks and providers for authentication, designed to be use with @polybase/auth (opens in a new tab).

`AuthProvider`

import * as React from "react";
import { PolybaseProvider, AuthProvider } from "@polybase/react";
import { Polybase } from "@polybase/client";
import { Auth } from "@polybase/auth"
 
const polybase = new Polybase();
const auth = new Auth()
 
export const App = () => {
  return (
    <PolybaseProvider polybase={polybase}>
      <AuthProvider auth={auth} polybase={polybase}>
        {/* ... your app routes */}
      </AuthProvider>
    </PolybaseProvider>
  );
};

Once you have added AuthProvider as a parent component then use the following hooks.

`useAuth()`

ℹ️

<AuthProvider> must be a parent component.

import * as React from "react";
import { useAuth } from "@polybase/react";
 
export const Component = () => {
  const { auth, state, loading } = useAuth();
 
  // `state` is null if not logged in, or logged in state e.g. { type: "metamask", userId: "..." }
 
  // `auth` is the prop passed to AuthProvider as auth 
 
  return (
    <div>
      <button onClick={() => auth.signIn()}>Sign In</button>
      <button onClick={() => auth.signOut()}>Sign Out</button>
    </div>
  )
};

`useIsAuthenticated()`

ℹ️

<AuthProvider> must be a parent component.

import * as React from "react";
import { useIsAuthenticated } from "@polybase/react";
 
export const Component = () => {
  const [isLoggedIn, loading] = useIsAuthenticated();
 
  // ... do something with logged in state
};

Encrypt Data FAQ