easybase-react

• About the Project
  • Purpose
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Documentation
• Examples
• Troubleshoot
• License
• Contact

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.

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.

• create-react-library
• cross-fetch
• easybase.io
• object-observer
• microbundle

• React 16.8.0
• npm

npm install easybase-react

├── 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 />
    </EasybaseProvider>
  );
}

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>
    )
  }
}

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

}

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

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

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