High Order Component for using nanoSQL with React
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.
Includes Typescript typings but still plays nice with Babel and ES5 projects.
npm i nano-sql-react --save
;;;/*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().*//*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.*/
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.