@wibmw/custom-form
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

Custom Form

An Easy React Customizable Form

![NPM version][npm-image]

🚀 Getting Started

Using yarn:

yarn add @wibmw\custom-form

Usage

How to use CustomInput or CustomSelect in your project:

import {CustomInput, CustomSelect }from 'custom-form'

export default () => {
  // Form Sate
  const [formState, setFormState] = useState(initForm),
  const Options = [
    { value: '', text: '--Choose an option--' },
    { value: 'sales', text: 'Sales' },
    { value: 'marketing', text: 'Marketing' },
  ]
  // Form Validation and Store in the database
  const save = (event) => {
      const fieldsNumber = Object.keys(formState).filter((fieldName) => fieldName.includes('Valid')).length,
        countValid = Object.values(formState).filter(Boolean).length / 2,
        element = event.target

      if (fieldsNumber === countValid) {
        // If all fields are valid then create the employee and open the modal
        clearValidationMessage(element)
        createNewEmployee(formState)
      } else {
        // Else show an error message
        setValidationMessage(element, 'The form is not fullfilled correctly')
      }
    }
  return (
   <>
      {/** *********** Page ******************/}
      <main className='...'>
        <section className='...'>
          {/** *********** Form ******************/}
          <form>
            {/** *********** Firstname Input ******************/}
            <Input
                name='firstName'
                label='First Name'
                regexp={/^[a-zA-Zéèàçùê -]{2,50}$/}
                message='Invalid First Name !'
                setFormState={setFormState}
                type='text' // or 'date' for a datepicker
            />
            {/** *********** State Selelct ******************/}
            <CustomSelect
                name='state'
                label='State'
                options={stateOptions}
                message='Invalid State !'
                setFormState={setFormState}
            />
            {/** *********** Button ******************/}
            <div onClick={async (e) => {await save(e)}} >
              Save
            </div>
          </form>
        </section>
      </main>
    </>
  )
}

const initForm = {
  firstName: '',
  state: '',
  isFirstNameValid: false,
  isStateValid: false,
}

📌 Input Props

Prop Type Default Required
name String Yes
label String Yes
regexp RegExp Yes
message String No
type String Yes
setFormState React.Dispatch<React.SetStateAction> Yes

📌 Select Props

Prop Type Default Required
name String Yes
label String Yes
message String No
options [{value, text}] Yes
setFormState React.Dispatch<React.SetStateAction> Yes

✌️ License

MIT

Install

npm i @wibmw/custom-form

DownloadsWeekly Downloads

1

Version

0.0.5

License

ISC

Unpacked Size

41 kB

Total Files

41

Last publish

Collaborators

  • wibmw