• Public
  • Public/Protected
  • All


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
Stateful database array Stateful database array
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

Click here to learn more about Easybase.io and check out the examples below.


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


  • React 16.8.0
  • npm


npm install easybase-react

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
└── ...


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 />

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 {
  } = useEasybase();

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

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

function Container() {
  const { Frame, useFrameEffect, configureFrame, sync } = useEasybase();

  useEffect(() => {
    configureFrame({ limit: 10, offset: 0 });
  }, []);

  useFrameEffect(() => {
    console.log("Frame data changed!");

  const onChange = (index, column, newValue) => {
      Frame(index)[column] = newValue;

  return (
      {Frame().map(ele => <Card {...ele} onChange={onChange} index={index}  />)}


Let's consider the lifecycle of Frame() as follows:

Frame Is Synchronized ->
useFrameEffect() runs ->
Edit Frame() ->
Call sync() ->
Frame Is Synchronized ->
useFrameEffect() runs

Frame() acts just like a plain array! When you want to push changes and synchronize with your data, just call sync().


Documentation for this library is available here.


Starting from scratch to serverless database + authentication

Stateful database array walkthrough

User authentication walkthrough


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


  3. npm install @react-native-community/async-storage@1.12.1

  4. Link package via these instructions


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


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


@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