Neurotoxin Powered Marketing


    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>
            ) : (


    npm i use-harperdb

    DownloadsWeekly Downloads






    Unpacked Size

    14.3 kB

    Total Files


    Last publish


    • deliciousmonster