# crudone

> crud ? done ! react component for easy crud

Latest version **1.0.6** (published 2021-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install crudone
pnpm add crudone
yarn add crudone
bun add crudone
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-03-01 |
| First published | 2019-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 49.1 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| Author | M. Nindra Zaka |
| Maintainers | mnindrazaka |
| Keywords | crud |

## Links

- npm: https://www.npmjs.com/package/crudone
- Repository: https://github.com/mnindrazaka/crudone
- Homepage: https://github.com/mnindrazaka/crudone#readme
- Issues: https://github.com/mnindrazaka/crudone/issues
- npm.io page: https://npm.io/package/crudone

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.8.6
- [formik](https://npm.io/package/formik.md) ^1.5.8
- [lodash](https://npm.io/package/lodash.md) ^4.17.14
- [validator](https://npm.io/package/validator.md) ^11.1.0
- [semantic-ui-css](https://npm.io/package/semantic-ui-css.md) ^2.4.1
- [semantic-ui-react](https://npm.io/package/semantic-ui-react.md) ^0.87.3

## Recent versions

- 1.0.6 (latest) — 2021-03-01
- 1.0.5 — 2021-03-01
- 1.0.3 — 2019-07-14
- 1.0.2 — 2019-07-14
- 1.0.1 — 2019-07-14
- 1.0.0 — 2019-07-14

## README

# crudone
crud ? done ! react component for easy crud

## How to Install

1. Install crudone

```bash
npm install crudone
```

2. Install semantic UI

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

```bash
# 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`

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

## Quick Start

This is example of contact CRUD using crudone 

```javascript
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 |

---
_Source: https://npm.io/package/crudone · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._