@tgthuan/mui-base-form NPM

@tgthuan/mui-base-form

Package using mui

Install

npm install --save @tgthuan/mui-base-form

Usage

import React from 'react'
import FM from '@tgthuan/mui-base-form'
import '@tgthuan/mui-base-form/dist/index.css'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'

const options = [
  { id: 1, name: 'A' },
  { id: 2, name: 'B' },
  { id: 3, name: 'C' },
  { id: 4, name: 'D' },
  { id: 5, name: 'E' }
]

const schema = yup.object().shape({
  checkbox: yup.array().nullable().required(),
  date: yup.date().nullable().required(),
  file: yup.mixed().nullable().required(),
  input: yup.string().nullable().required(),
  'lazy-select': yup.number().nullable().required(),
  'nested-menu': yup.number().nullable().required(),
  radio: yup.number().nullable().required(),
  rich: yup.string().nullable().required(),
  select: yup.number().nullable().required()
})

const App = () => {
  const form = useForm({
    defaultValues: {
      checkbox: [1, 2],
      date: new Date(),
      file: null,
      input: 'Input',
      'lazy-select': 1,
      'nested-menu': 1,
      radio: 1,
      rich: 'Rich Text',
      select: 1
    },
    resolver: yupResolver(schema)
  })
  return (
    <FM form={form} onSubmit={(values) => alert(JSON.stringify(values))}>
      <div style={{ maxWidth: 500, margin: 200 }}>
        <FM.CheckboxField name='checkbox' label='Checkbox' options={options} />
        <FM.DateField name='date' label='Date' />
        <FM.FileField name='file' label='File' />
        <FM.InputField name='input' label='Input' />
        <FM.LazySelect
          name='lazy-select'
          label='Lazy Select'
          options={options}
        />
        <FM.NestedMenu
          name='nested-menu'
          label='Nested Menu'
          options={options}
          labelKey='name'
        />
        <FM.RadioField name='radio' label='Radio' options={options} />
        <FM.RichTextField name='rich' label='Rich Text' />
        <FM.SelectField name='select' label='Select' options={options} />
        <button type='submit'>Submit</button>
      </div>
    </FM>
  )
}

export default App