re-form
React form library.
Installation
re-form requires
- react/react-dom 16.8.3 or later to build your form.
$ npm install --save @savedo/re-form
or
$ yarn add @savedo/re-form
Usage
Basic usage: Creating a react form component with three input fields (name, age, email) validation and values assignment.
Create your form component:
import React from 'react';
import { FormBuilder } from '@savedo/re-form';
const MyForm = ({ handleSubmit }) => {
const fields = [
'name',
'age',
'email'
];
const fieldOptions = {
name: {
label: 'Name:'
},
age: {
label: 'Age:',
type: 'number'
},
email: {
label: 'E-mail:'
}
};
const validate = (formData) => {
const errors = {};
const { name, age } = formData;
if (!name) {
errors.name = 'Name is required!';
}
if (!age) {
errors.age = 'Age is required!';
} else if (Number(age) < 18) {
errors.age = 'You should be 18 years old or older!';
}
return errors;
};
return (
<div>
<FormBuilder { ...{ fields, fieldOptions, handleSubmit, validate } } />
</div>
);
};
export default MyForm;
And use form component elsewhere:
import React from 'react';
import MyForm from './MyForm';
const App = () => {
const handleSubmit = (formData) => {
console.log(formData)
};
return (
<MyForm handleSubmit={ handleSubmit } />
);
};
export default App;
Configuration
The FormBuilder
component has props as shown below. It has FormBuilderPropsType<T>
type. T refers to your object type having key (Field name, ) / values (Field options ).
FormBuilderPropsType
Property | Type | Description |
---|---|---|
fields | string[] | Unique field names |
fieldOptions | { key (string): options (FieldOptionsValueType) } | Field/Component options (See table below) |
values | object | Init values for the fields |
handleSubmit | function | Callback function to handle submit behaviour if validation successful |
validate | method | Callback function for validation (form data will be passed as an argument), supports sync/async functions. |
submitSection | React.FC | React component to provide submit button or submit event |
FieldOptionsValueType
Property | Type | Default | Optional | Description |
---|---|---|---|---|
name | string | field key name | true | name of the field |
label | string | field key name | true | label for the form field |
element | input, select, textarea | input[type=text] | true | HTML tag for the form field |
type | input types (eg. text, number, email, checkbox etc) | text | true | type attribute for HTMLInputElement |
component | FunctionalComponent | N/A | true | Pass your FunctionalComponent with props (FormFieldPropsType). element and type becomes redundant when component is used. |
keyValues | { [key: string]: any } | N/A | true | Only viable when element is select . This object provides the list of <option value="key">value</option>
|
className | string | N/A | true | CSS class(es) for the element |
defaultValue | string | N/A | true | Default value for a field. |
disabled | boolean | N/A | true | Disabled prop for inputs. |
placeholder | string | N/A | true | Placeholder text for the input. |
checked | boolean | N/A | true | Used for checkboxes to pass default value when type is checkbox . |
checkboxText | string | N/A | true | Used for pass label for chebox element, normal label is being used for input lable. |
FormFieldPropsType
Props below will be passed to your custom component.
Property | Type | Description |
---|---|---|
options | FieldOptionsValueType | Options defined for field (See table above) |
error | string | Error message to pass into component if the input is not valid |
setValue | Function | N/A. For internal usage |
value | any | N/A. For internal usage |
checked | boolean | Passed when type is checkbox in place of Value. |
name | string | N/A. For internal usage |
Development
In order to start dev server, type
yarn develop
it opens your browser with url http://localhost:9100/
License
MIT