crudone v1.0.6

crudone

crud ? done ! react component for easy crud

How to Install

1. Install crudone

npm install crudone

2. Install semantic UI

crudone use semantic UI as component library, so we have to install it

# install semantic UI for react
npm install semantic-ui-react

# install semantic UI css
npm install semantic-ui-css

3. Enable semantic UI CSS

import semantic-ui-css/semantic.min.css to your index.js

import 'semantic-ui-css/semantic.min.css'

Quick Start

This is example of contact CRUD using crudone

import React, { Component } from 'react'
import 'semantic-ui-css/semantic.min.css'
import { Container, CreateButton, Table, Validation, Form } from 'crudone'

const schema = {
  name: {
    label: 'Name',
    validations: [Validation.required]
  },
  phone: {
    label: 'Phone',
    validations: [Validation.numeric, Validation.required]
  }
}

export default class App extends Component {
  state = {
    data: [
      { id: 1, name: 'aka', phone: '085331247098' },
      { id: 2, name: 'zaka', phone: '085331247097' },
      { id: 3, name: 'nindra', phone: '085331247096' }
    ]
  }

  createContact = contact => {
    const { data } = this.state
    data.push(contact)
    this.setState({ data })
  }

  updateContact = contact => {
    this.setState(prevState => ({
      data: prevState.data.map(item =>
        item.id === contact.id ? contact : item
      )
    }))
  }

  deleteContact = contact => {
    this.setState(prevState => ({
      data: prevState.data.filter(item => item.id !== contact.id)
    }))
  }

  render() {
    return (
      <Container schema={schema}>
        <CreateButton />
        <Table.Container data={this.state.data}>
          <Table.Search />
          <Table.Limiter />
          <Table.Display />
        </Table.Container>
        <Form
          onCreate={this.createContact}
          onUpdate={this.updateContact}
          onDelete={this.deleteContact}
        />
      </Container>
    )
  }
}

Props

1. Container

<Container /> used to wrap other component

2. Table

Here is the list of table component

2.1. Table Container

<Table.Container /> used to wrap table component

2.2. Table.Display

<Table.Display /> used to show table

2.3. Table Search

<Table.Search /> used to search data in table

2.4. Table Limiter

<Table.Limiter /> used to limit data per page

3. Form

<Form /> used to show modal form for CRUD operation

4. Create Button

<CreateButton /> used to trigger <Form /> modal on create operation