boost-crud v0.2.0

boost-crud

Create, update, read and delete UI utilities for the web.

To Do

• Static data source
• Enable disabling sort on certain columns
• Unit tests
  • Forms Utils
  • Form reducers
  • DataTable reducers
• Strip out unnecessary stuff from form utils and models
  • Submit
• Integrate form library
  • Type detection
  • Human friendly column titles
• Support for filter form
• CRUD UI service
  • List service
  • Details
  • Edit
  • Create
  • Delete
• Documentation

Getting Started

Install boost-crud using npm or yarn as:

npm i boost-crud

Using Form Utilities

First, setup a javascript object representing a form as:

const forObj = {
    email: "",
    password: "",
    confirmPassword: "",
    rememberMe: true
}

Then, get your form state as:

import {getFormService} from "boost-crud";

const formService = getFormService()
const formState = formService.getInitialState(forObj)

Then you can use your form state in any framework (react, svelte, vue, etc.).

In react:

const [formState, setFormState] = useState(formService.getInitialState(forObj))

function onFieldChange(e) {
    const newState = formService.hangeFieldValue(formState, e.target.name, e.target.value)
    setFormState(newState)
}

const MyForm = () => {
  return <form>
    <label>Email:
      <input name="password" onChange={onFieldChange}/></label>
    <label>Password:
      <input name="password" onChange={onFieldChange}/></label>
    <label>Confim Password:
      <input name="confirmPassword" onChange={onFieldChange}/></label>
    <label>
      <input type="checkbox" name="rememberMe" value={true} onChange={onFieldChange} />Remember Me?</label>
  </form>
}