crud-hook

CRUD Hook beta

🌟Overview

Welcome to crud-hook, an open-source library for React that provides a CRUD hook to manage your data.

✨ Features

• TypeScript: Benefit from enhanced developer experience and static typing.
• Ant Design: Use a comprehensive set of UI components out of the box.
• CRUD Hook: Use a CRUD hook to manage your data.

🚀 Getting Started

📦 Installation

# with pnpm
pnpm add crud-hook
# with yarn
yarn add crud-hook
# with npm
npm install crud-hook

💻 Usage

• Base:

import { useProTable } from 'crud-hook'
// ...import apis etc.

export const App = () => {
  const { tableDom } = useProTable({
    apis: {
      list: getDictList,
      create: createDict,
      update: (values, { id }) => updateDict(id, values),
      delete: ({ id }) => deleteDict(id),
    }
    schemas: [
      {
        title: '#',
        dataIndex: 'id',
        hideInSearch: true,
        hideInForm: true,
      },
      {
        title: 'Key',
        dataIndex: 'key',
        formItemProps: {
          rules: [{ required: true }],
        },
      },
      {
        title: 'Value',
        dataIndex: 'value',
      }
    ]
  })

  return <>{tableDom}</>
}

• advanced:

import { useProTable } from 'crud-hook'
// ...import apis etc.

export const App = () => {
  const { tableDom, table, form, description } = useProTable({
    apis: {
      list: getDictList,
      create: createDict,
      update: (values, { id }) => updateDict(id, values),
      delete: ({ id }) => deleteDict(id),
    }
    config: {
      hideApiMessage: true,
    },
    action: {
      actionProps: {
        title: 'Action',
      },
      createText: 'Create',
      editText: 'Edit',
      deleteText: 'Delete',
      detailText: 'Detail',
      prepend: ({ record, action }) => [<a onClick={() => action?.reload()}>{record.key}</a>],
    },
    formProps: {
      title: (isEdit, record) => (isEdit ? record?.key : 'Create'),
    },
    tableProps: {},
    schemas: [
      {
        title: '#',
        dataIndex: 'id',
        hideInSearch: true,
        hideInForm: true,
      },
      {
        title: 'Key',
        dataIndex: 'key',
        formItemProps: {
          rules: [{ required: true }],
        },
      },
      {
        title: 'Value',
        dataIndex: 'value',
      },
      {
        title: 'Type',
        dataIndex: 'value_type',
        valueType: 'radio',
        valueEnum: {
          string: 'String',
          number: 'Number',
          boolean: 'Boolean',
          json: 'Json',
        },
        initialValue: 'string',
        render: (dom) => <Tag bordered={false}>{dom}</Tag>,
      },
      {
        title: 'Descrition',
        dataIndex: 'description',
        valueType: 'textarea',
        hideInSearch: true,
      },
      {
        title: 'Created At',
        dataIndex: 'created_at',
        valueType: 'dateTime',
        hideInForm: true,
      },
    ]
  })

  return <>{tableDom}</>
}