Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including nano-sql-react with all npm packages installed. Try it out:

require("nano-sql/package.json"); // nano-sql is a peer dependency. require("react/package.json"); // react is a peer dependency. var nanoSqlReact = require("nano-sql-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

nano-sql-react v1.5.0

High Order Component for using nanoSQL with React

Nano-SQL-React

High Order Component for using nanoSQL with React

nanoSQL Logo

NanoSQL is a database/datastore with tons of RDBMS features, Undo/Redo, and optional built in persistence to Indexed DB, WebSQL or LocalStorage.

This module lets you easily attach the rendering for your components to specific nanoSQL tables and queries.

Automatically handles binding and unbinding event listeners, triggering changes and returning them to your component.

Examples

Includes Typescript typings but still plays nice with Babel and ES5 projects.

Installation

npm i nano-sql-react --save

Usage

import { bindNSQL } from "nano-sql-react";
import { DatabaseEvent } from "nano-sql";
import * as React from "react";

/*
Step 1: Make your component as usual, just add the two additional nSQL* props below.
Step 2: Add the two static methods below, tables() and onChange().
*/
export class MyComponent extends React.Component<{
    some: any;
    other: any;
    props: any; // any number of props you need
    nSQLdata: any; // holds data from nanoSQL
    nSQLloading: boolean; // if a query is pending
}, {}> {

    // Tables to listen for changes on 
    static tables() {
        return ["tables", "to", "listen"];
    }

    // Method is called on each change
    static onChange: (event, complete) => { 
        nSQL("table").query("select").exec().then((rows) => {
            if (!rows.length) return;
            // whatever you pass into complete() 
            // will become this.props.nSQLdata in the render method
            complete({message: rows[0].message});
        });
    }

    render() {
        return this.props.nSQLloading ? 
        "Loading..." : 
        this.props.nSQLdata.message + this.props.some;
    }
}

/*
Step 2: In the parent component, call the bindNSQL function against a new variable.
Step 3. Pass in the arguments as described.
Step 4: Use the new variable as your component.
*/
export class ParentComponnt extends React.Component<{}, {}> {

    public messageComponent: React.ComponentClass<P>;

    constructor(p) {
        super(p);
        this.messageComponent = bindNSQL(MyComponent);
    }

    render() {
        // You can pass in your other props while you're at it.
        return <this.messageComponent some={"1"} other={"2"} props={"3"} />;
    }
}

As an additional note, the onChange function will be called once on component mount to bring in any state from nanoSQL, then any subsequent onChange calls will be due to actual events from the database.

You can check to see if it's the first mount call by doing this check in the onChange function: event.notes === ["mount"]. That will return false for all standard queries from nanoSQL but true for the first call on the component mount.

You can learn more about nanoSQL here.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free