react-node-easy-crud

react componets library to use with node-easy-crud to create easy curd application in MERN stack. you should use node-easy-crud on your backend to use this componets.

Installation

npm install react-node-easy-crud

add icons css to index.html of react project

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

Simple usage

<EasyCrudTable url="<node-easy-crud read endpoint>"></EasyCrudTable>

Example

import React from "react";
import "./App.css";
import EasyCrudTable from "react-easy-crud";
 
function App() {
  return (
    <div className="App">
      <EasyCrudTable
        url="http://localhost:5000/api/crud/Subject"
      ></EasyCrudTable>
    </div>
  );
}
 
export default App;

Headers

you can also pass custom headers using headers props

<EasyCrudTable
  url="http://localhost:5000/api/crud/Subject"
  headers={{ "auth-token": "AUTH_TOKEN","key":"value" }}
></EasyCrudTable>

SnapShots

Table with read data

Edit Form

Add Form

Delete Confirmation