1. React

React hooks for Polybase.

Install Polybase

npm install @polybase/react
yarn add @polybase/react

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)

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)

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;
};