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 | |
| Get/Set user attributes | |
| Access multiple tables | |
| 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.
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.
- 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>
);
}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, Update, Delete, or Insert queries!
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 for this library is available here.
Information on database querying can be found in the EasyQB docs.
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.
npm start -- --reset-cache- Exit bundler, proceed as normal
Or
npm install @react-native-community/async-storage@1.12.1- Link package via these instructions
No linking is required for React. If you encounter any errors during installation or runtime, simply reinstall the library.
- Delete
node_modules/folder 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
