@muzikanto/observable-form-material v1.0.2

Observable-form-material

• Introduction
• Installation
• Examples
  • FormTextField
  • FormNumber
  • FormMaskField
  • FormDatePicker
  • FormDateTimePicker
  • FormAutocomplete
  • FormSelect
  • FormDescription
  • FormRadioGroup
  • FormCheckbox
• License

Introduction

• all component form your form
• based on observable-form
• material form components
• fast create form
• optimize renders every changes

Installation

npm i @muzikanto/observable @muzikanto/observable-form @muzikanto/observable-form-material
# or
yarn add @muzikanto/observable @muzikanto/observable-form @muzikanto/observable-form-material

demo

Examples

FormTextField

<FormTextField name='text' label='text' />

FormNumber

<FormNumber
   name='number'
   label='number'
   min={0} // or undefined
   max={100} // or undefined
/>

FormDatePicker

FormDatePicker and FormDateTimePicker require date-fns @date-io/date-fns or other date utils

<FormDatePicker name='date' label='date' />

FormDateTimePicker

<FormDateTimePicker name='dateTime' label='dateTime' />

FormMaskField

require react-text-mask @types/react-text-mask read more for package

<FormMaskField
   name='phone'
   label='phone number'
   mask={[
      '+',
      /\d/,
      ' ',
      '(',
      /\d/,
      /\d/,
      /\d/,
      ')',
      ' ',
      /\d/,
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
      '-',
      /\d/,
      /\d/,
   ]}
   replace={/\D/g}
/>

FormSelect

<FormSelect name='select' label='select'>
   <MenuItem value={1}>one</MenuItem>
   <MenuItem value={2}>two</MenuItem>
   <MenuItem value={3}>three</MenuItem>
</FormSelect>

FormDescription

<FormDescription label='description' name='description' maxLetters={500} />

FormRadioGroup

<FormRadioGroup row name='radio'>
   <Radio value='0' />
   <Radio value='1' />
   <Radio value='2' />
</FormRadioGroup>

FormCheckbox

<FormCheckbox name='checkbox' />

FormAutocomplete

require @material-ui/lab read more for package

<FormAutocomplete<string>
   name='actv'
   renderInput={params => <TextField label='actv' {...params} />}
   options={new Array(5).fill(0).map((_, i) => i.toString())}
/>

License

MIT