A small simple Form plus Input components for React using hooks.
Simply install from npm or yarn
npm install --save @gifco/react-form
or
yarn install --save @gifco/react-form
Requires React.js 16.8 or greater.
First import the Form and any inputs you need
import { Form, FormInput, FormTextarea, FormSelect } from '@gifco/react-form'
Setup the form the way you would like. If you want submit button inside the form include a button element within Form
<Form onSubmit={handleSubmit}>
<FormInput type="text" name="username"/>
<FormInput name="password"/> //FormInput type defulats to text
<FormTextarea name="comments"/>
<button type="submit">Submit</button>
</Form>
Form values are passed to onSubmit handler as an object with key as input name and value as input value.
const handleSubmit = (values) => {
//do stuff with form values
//values === { username: 'somename', password: 'thepassword', comments: 'these are the commnets'}
}
Form validation is handled by passing a validation function to the specific inputs and is checked on input blur event. It should return an object { error: <true | false>, msg: 'The error msg'}
const validateName = (string) => {
if(string.length < 8){
return { error: true, msg: 'Please enter a name longer than 8 characters'}
}else{
return { error: false, msg: ''}
}
}
<Form onSubmit={handleSubmit}>
<FormInput type="text" name="username" validation={validateName}/>
<FormInput name="password"/>
<button type="submit">Submit</button>
</Form>
To use FormSelect just pass regular elements as its children
<Form onSubmit={handleSubmit}>
<FormSelect name="mySelect">
<option value="option1>Option 1</option>
<option value="option2>Option 2</option>
<option value="option3>Option 3</option>
</FormSelect>
<button type="submit">Submit</button>
</Form>
We use SemVer for versioning. For the versions available, see the tags on this repository.
- Giff Boake
This project is licensed under the MIT License