Options
All
  • Public
  • Public/Protected
  • All
Menu

easybase-react

easybase code example


easybase logo black


npm GitHub npm bundle size npm


Table of Contents

About The Project

React and React Native compatible library for use with Easybase. This serverless platform works with a free account. easybase-react can be used with a table's REACT integration or with a Project. In the latter case, this package provides functions for managing user authentication. Documentation for this project can be found here.

REACT Integration Project
Live usage analytics Live usage analytics
Custom table permissions Custom table permissions
Database query builder Database query builder
Access to visual queries Access to visual queries
User authentication User authentication
Get/Set user attributes Get/Set user attributes
Access multiple tables Access multiple tables
Associate records to users Associate records to users

Cloud functions can be invoked using this package with the automatically generated route as provided by Easybase. Click here to learn more about Easybase.io and check out the examples below.

Purpose

This project aims to be the most developer-friendly serverless framework for React. Functions and attributes of easybase-react are stateful and explicitly follow the React component lifecycle.

The only configuration needed to get this library up and running is an ebconfig.js token, as provided by Easybase. Your React & React Native applications will instantly have secure access to the features laid out in the above table.

Built With

Getting Started

Prerequisites

  • React 16.8.0
  • npm

Installation

npm install easybase-react

Database

Create a React integration or Project

react easybase integration 1

react easybase integration 2

Then, download your token and place it at the root of your project

├── src/
│   ├── App.js
│   ├── index.js
│   └── ebconfig.js
├── assets/
├── package.json
└── ...

Cloud Functions

Deploy a new cloud function

react easybase deploy function 1

Take note of the automatically generated route

react easybase deploy function 1

Usage

Database

Wrap your root component in EasybaseProvider with your credentials.

import React, { useEffect } from "react";
import { EasybaseProvider, useEasybase } from 'easybase-react';
import ebconfig from "./ebconfig.json";

function App() {
  return (
    <EasybaseProvider ebconfig={ebconfig}>
      <Container />
    </EasybaseProvider>
  );
}

If you're using a project, implement a sign-in/sign-up workflow for users.

function ProjectUser() {
  const [usernameValue, setUsernameValue] = useState("");
  const [passwordValue, setPasswordValue] = useState("");

  const {
    isUserSignedIn,
    signIn,
    signUp,
    getUserAttributes
  } = useEasybase();

  if (isUserSignedIn()) {
    return (
      <div>
        <h2>Your signed in!</h2>
        <button onClick={ _ => getUserAttributes().then(console.log) }>
          Click me only works if your authenticated!
        </button>
        <Container />
      </div>
    )
  } else {
    return (
      <div style={{ display: "flex", flexDirection: "column" }}>
        <h4>Username</h4>
        <input value={usernameValue} onChange={e => setUsernameValue(e.target.value)} />
        <h4>Password</h4>
        <input type="password" value={passwordValue} onChange={e => setPasswordValue(e.target.value)} />
        <button onClick={_ => signIn(usernameValue, passwordValue)}>
          Sign In
        </button>
        <button onClick={_ => signUp(usernameValue, passwordValue)}>
          Sign Up
        </button>
      </div>
    )
  }
}


Then, interface with your data in a stateful and synchronous manner.

EasyQB is a powerful query builder to perform Select, Update, Insert, and Delete operations on your table. You can access this through the .db function. Learn how to use the .db function here. Here's an example of how to use a simple clause to read and insert data with your table.

function Container() {
  const { db } = useEasybase();

  const [easybaseData, setEasybaseData] = useState([])
  const [currentPage, setCurrentPage] = useState(0)

  useEffect(() => {
    const mounted = async () => {
      const res = await db('MY TABLE').return().limit(10).offset(currentPage * 10).all()
      setCurrentData(res)
    }

    mounted();
  }, [currentPage]);

  const onChange = async (_key, column, newValue) => {
      await db('MY TABLE').set({ [column]: newValue }).where({ _key: _key }).one()
  }

  const onChangePage = (pageNum) => {
    setCurrentPage(pageNum)
  }

  return (
    <div>
      {easybaseData.map(ele => <Card
          {...ele}
          onChangeValue={onChangeValue}
          onChangePage={onChangePage}
        />
      )}
    </div>
  )

}

To see just how much functionality is packed into the .db function (aggregators, grouping, expressions), check out the documentation here.


Learn about using the `.db` function for [Select](https://easybase.github.io/EasyQB/docs/select_queries.html), [Update](https://easybase.github.io/EasyQB/docs/update_queries.html), [Delete](https://easybase.github.io/EasyQB/docs/delete_queries.html), or [Insert](https://easybase.github.io/EasyQB/docs/insert_queries.html) queries!

Cloud Functions

The EasybaseProvider pattern is not necessary for invoking cloud functions, only callFunction is needed.

import { callFunction } from 'easybase-react';

function App() {
    async function handleButtonClick() {
        const response = await callFunction("123456-YOUR-ROUTE", {
            hello: "world",
            message: "Find me in event.body"
        });

        console.log("Cloud function: " + response);
    }

    //...
}

Documentation

Documentation for this library is available here.

Details on database querying is available on EasyQB.

Examples

User authentication walkthrough

Deploying cloud functions

Troubleshoot

React Native

For React Native users, this library will not work with expo due to native dependencies. Instead, use react-native run-ios.

Errors can arise because this library depends on Async Storage which requires linking. This package attempts to automatically handle this for you during postinstall (scripts/postinstall.js). If this script fails or you encounter an error along the lines of Unable to resolve module '@react-native-community/async-storage'..., here are two different methods to configure your React Native project.

  1. npm start -- --reset-cache
  2. Exit bundler, proceed as normal

Or

  1. npm install @react-native-community/async-storage@1.12.1
  2. Link package via these instructions

React

No linking is required for React. If you encounter any errors during installation or runtime, simply reinstall the library.

  1. Delete node_modules/ folder
  2. npm install easybase-react

License

Distributed under the MIT License. See LICENSE for more information.

Contact

@easybase_io - hello@easybase.io

Project Link: https://github.com/easybase/easybase-react

Easybase.io - Serverless platform for apps and projects. React.js Focused. | Product Hunt

Generated using TypeDoc