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

Name	Type	Default	Description
Schema	Object		Schema of data

2. Table

Here is the list of table component

2.1. Table Container

<Table.Container /> used to wrap table component

Name	Type	Default	Description
data	Array of Object		Data for table

2.2. Table.Display

<Table.Display /> used to show table

Name	Type	Default	Description
emptyText	String	Data not found	Message to show when data empty
onRowClick	Function		Function when table row clicked

2.3. Table Search

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

Name	Type	Default	Description
placeholder	String	Search	Placeholder for search input

2.4. Table Limiter

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

Name	Type	Default	Description
text	String	Item Per Page	Text to show as label
limits	Array of Number	[10, 25, 50]	List of limit to use

3. Form

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

Name	Type	Default	Description
createTitle	String	Create New	Form title to show on create operation
updateTitle	String	Update Data	Form title to show on update operation
onCreate	Function		Function to handle create operation
onUpdate	Function		Function to handle update operation
onDelete	Function		Function to handle delete operation

4. Create Button

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

Name	Type	Default	Description
text	String	Add New	Text to show in button