Custom Form

An Easy React Customizable Form

![NPM version][npm-image]

🚀 Getting Started

Using yarn:

1yarn add @wibmw\custom-form

✨ Usage

How to use CustomInput or CustomSelect in your project:

1import {CustomInput, CustomSelect }from 'custom-form'
2
3export default () => {
4  // Form Sate
5  const [formState, setFormState] = useState(initForm),
6  const Options = [
7    { value: '', text: '--Choose an option--' },
8    { value: 'sales', text: 'Sales' },
9    { value: 'marketing', text: 'Marketing' },
10  ]
11  // Form Validation and Store in the database
12  const save = (event) => {
13      const fieldsNumber = Object.keys(formState).filter((fieldName) => fieldName.includes('Valid')).length,
14        countValid = Object.values(formState).filter(Boolean).length / 2,
15        element = event.target
16
17      if (fieldsNumber === countValid) {
18        // If all fields are valid then create the employee and open the modal
19        clearValidationMessage(element)
20        createNewEmployee(formState)
21      } else {
22        // Else show an error message
23        setValidationMessage(element, 'The form is not fullfilled correctly')
24      }
25    }
26  return (
27   <>
28      {/** *********** Page ******************/}
29      <main className='...'>
30        <section className='...'>
31          {/** *********** Form ******************/}
32          <form>
33            {/** *********** Firstname Input ******************/}
34            <Input
35                name='firstName'
36                label='First Name'
37                regexp={/^[a-zA-Zéèàçùê -]{2,50}$/}
38                message='Invalid First Name !'
39                setFormState={setFormState}
40                type='text' // or 'date' for a datepicker
41            />
42            {/** *********** State Selelct ******************/}
43            <CustomSelect
44                name='state'
45                label='State'
46                options={stateOptions}
47                message='Invalid State !'
48                setFormState={setFormState}
49            />
50            {/** *********** Button ******************/}
51            <div onClick={async (e) => {await save(e)}} >
52              Save
53            </div>
54          </form>
55        </section>
56      </main>
57    </>
58  )
59}
60
61const initForm = {
62  firstName: '',
63  state: '',
64  isFirstNameValid: false,
65  isStateValid: false,
66}
67

📌 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