lre-react

Overview

lre-react is a library of reusable components tailored specifically to LRE Water use cases. The components are meant for use with React and are an extension of the Material UI framework. This library has grown out of the LRE Starter kKt and is meant to compliment the Starter Kit as well as any other React project.

Roadmap

• <input disabled="" type="checkbox"> Filters
  • <input checked="" disabled="" type="checkbox"> Date
  • <input checked="" disabled="" type="checkbox"> Multi-select
  • <input checked="" disabled="" type="checkbox"> Single-select
  • <input disabled="" type="checkbox"> Search multi-select
  • <input checked="" disabled="" type="checkbox"> Switch
  • <input checked="" disabled="" type="checkbox"> TextField
  • <input checked="" disabled="" type="checkbox"> TextArea
  • <input disabled="" type="checkbox"> Filter Bar
• <input disabled="" type="checkbox"> Tables
  • <input checked="" disabled="" type="checkbox"> ListTable
  • <input checked="" disabled="" type="checkbox"> DataTable
• <input disabled="" type="checkbox"> Graphs
  • <input disabled="" type="checkbox"> Line Graph
• <input disabled="" type="checkbox"> Authentication and Authorization
• <input disabled="" type="checkbox"> Reports and Views
  • <input disabled="" type="checkbox"> Reports Home
  • <input disabled="" type="checkbox"> View Management
• <input disabled="" type="checkbox"> Data Management
  • <input disabled="" type="checkbox"> Editable Grid
  • <input disabled="" type="checkbox"> Draggable Grid
  • <input disabled="" type="checkbox"> View List Item
  • <input disabled="" type="checkbox"> Edit List Item
  • <input disabled="" type="checkbox"> Add List Item
  • <input disabled="" type="checkbox"> Delete List Item
• <input disabled="" type="checkbox"> Hooks
  • <input checked="" disabled="" type="checkbox"> useTable
  • <input checked="" disabled="" type="checkbox"> useGraph
  • <input disabled="" type="checkbox"> useFetchData
  • <input disabled="" type="checkbox"> useFilterAssoc
  • <input disabled="" type="checkbox"> useFormSubmitStatus
  • <input checked="" disabled="" type="checkbox"> useVisibility
• <input disabled="" type="checkbox"> Util

Install

npm install --save @lrewater/lre-react

Usage

import React, { useState } from "react";

import { TextField } from "@lrewater/lre-react";

const Example = props => {
  const [value, setValue] = useState("Example Value");

  const handleChange = event => {
    setValue(event.target.value);
  };
  return (
    <form>
      <TextField
        name="example"
        label="Example"
        value={value}
        onChange={handleChange}
      />
    </form>
  );
};

License

MIT © lrewater