0.1.6 • Public • Published

🧰 useHarperDB

A React Hook for accessing HarperDB.

🚀 Getting Started

HarperDB has a built-in http API, which means you can query data directly from within your client-side application. This React hook makes it easy to keep track of the loading, error, and data state of those queries.

React Version Note: React Hooks require React 16.8.0+

Client-Side Security Note: For a public, web-based application, NEVER use the default (super-user) account. Super-Users have unrestricted access to the database- they can add/drop schemas and tables, so they could delete all your data.

Instead, create a web-specific user that only has read/write/update/delete access to the specific tables they require.

For queries where users should only have access to specific ROWS of data (for example):

SELECT * FROM WHERE owner_id = 2'll still need to implement a server-side API to prevent the user from simply swapping out the 2 for some other owner_id

Install the hook

npm i -s use-harperdb


yarn add use-harperdb

Add the HarperDBProvider to your index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HarperDBProvider } from 'use-harperdb';

    <HarperDBProvider url="http://localhost:9925" user="HDB_ADMIN" password="password">
      <App />


  • Executes a HarperDB operation using the Provider's url, user, and password
  • (optionally) set up an interval to re-run the operation


parameter type description
query Object The HarperDB operation you wish to execute
interval Integer (optional) rate in ms to re-run the query


import React from 'react';
import './App.css';
import { useHarperDB } from 'use-harperdb';

import loadingLogo from './logo-loading.svg';
import logo from './logo.svg';

export default () => {
  // primary request, re-run every 5 seconds
  const [ data, loading, error, refresh ] = useHarperDB({ query: { operation: 'sql', sql: 'select * from' }, interval: 5000 });
  // secondary request, no interval, not making use of loading, error, or refresh
  const [ data2 ] = useHarperDB({ query: { operation: 'sql', sql: 'select count(*) as totalDogs from' } });

  return (
    <div className="App">
      <header className="App-header">
        <img src={loading ? loadingLogo : logo} className="App-logo" alt="logo" />
        <button onClick={refresh}>refresh</button>
        Total Dogs: {data2 ? data2[0].totalDogs : '...'}
        {data ? (
        ) : error ? (
          <div style={{ color: 'red' }}>error: {error || 'false'}</div>
        ) : (

Package Sidebar


npm i use-harperdb

Weekly Downloads






Unpacked Size

14.3 kB

Total Files


Last publish


  • deliciousmonster