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

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

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

Usage

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.

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

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

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

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

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

}

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

Documentation for this library is available here.

Examples

Starting from scratch to serverless database + authentication

Stateful database array walkthrough

User authentication walkthrough

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

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

  4. 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