nullbackend-react

React hooks for nullbackend.pro, built on top of nullbackend-sdk.

Install

npm install nullbackend-react nullbackend-sdk react

Usage

import { NullbackendProvider, useProducts } from 'nullbackend-react';

function Products() {
  const { data, loading, error, create, remove } = useProducts();

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((p) => (
        <li key={p.id}>
          {p.name} — ${p.price}
          <button onClick={() => remove(p.id)}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <NullbackendProvider publicKey="pk_live_xxx">
      <Products />
    </NullbackendProvider>
  );
}

Pass baseUrl="http://localhost:3001" to <NullbackendProvider> while developing locally; omit it in production to use https://api.nullbackend.pro.

Custom API endpoints

Design endpoints in the dashboard (Project → API Builder), then consume them in React:

import { useApi } from 'nullbackend-react';

function Users() {
  const { data, loading, error, post, patch, remove, refresh } = useApi('users');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <button onClick={() => post({ name: 'Alice', age: 30 })}>
        Add user
      </button>
      <ul>
        {data?.data?.map((u) => (
          <li key={u.id}>
            {u.name} ({u.age})
            <button onClick={() => patch(u.id, { age: u.age + 1 })}>+1</button>
            <button onClick={() => remove(u.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </>
  );
}

useApi(path) returns:

• data, loading, error
• refresh()
• post(body) — POST to <path>
• put(body) or put(id, body) — PUT to <path> or <path>/<id>
• patch(body) or patch(id, body) — same for PATCH
• remove() or remove(id) — DELETE from <path> or <path>/<id>

For full control, use useApiCall():

const call = useApiCall();
const result = await call('POST', 'users', { name: 'Alice' });

API

• <NullbackendProvider publicKey baseUrl?> — wrap your app once
• useNullbackend() — get the raw client (same as nullbackend-sdk's init() result)
• useProducts() → { data, loading, error, refresh, create, update, remove }
• useApi(path, opts?) → { data, loading, error, refresh, post, put, patch, remove }
• useApiCall() → (method, path, body?) => Promise

License

MIT