React-simple-form2 NPM

react-simple-form2

A collection of Formik based form components I use for my apps

npm i -D react-simple-form2

This library marks formik as an external dependency. Please make sure you have formik^2.1.4 installed in your project.

For a complete usage code sample, see the stories for this component here

This sections tabulates all the props for each form component. All the components share common props shown in the table below

Name	Type	Description
`label`	`string`	The label of the input
`name`	`string`	The name to identify the component value in the form data

The StringInput accepts all the common props and all <input /> props.
The TextInput accepts all the common props and all <textarea /> props.
The SelectInput accepts all the common props and all <select /> props.
The CheckboxInput accepts all the common props and all <input type="checkbox" /> props.
The CheckGroupInput is a multi checkbox component. It accepts all the common props and an options prop.

Name	Type	Description
`options`	`Array<Array<string>>`	The options of the component

options = [
    ["Label1", "value1"],
    ["Label2", "value2"],
    ["Label3", "value3"]
];

The RadioGroupInput accepts all the common props and an options prop. This is the same as that of the CheckGroupInput.
The FileInput accepts all the common props in addition to ext, maxSize, validate props.

Name	Type	Description
`ext`	`Array<string>`	An optional list of file extensions accepted by the component. E.g. (`["png", "jpg"]`)
`maxSize`	`number`	The maximum file size in bytes. This is optional
`validate`	`Function`	An optional validation function. If specified, the selected file is passed to it. It should return a string indicating an error or null otherwise.

The FormikFieldWrapper is used to transform any custom component to a form component. It's child must be a function accepting form related props and returning the custom component. Please refer to the code sample on how to use it

The FormikEffect is used to notify components outside the form when any of the form values change. It's onChange function receives the current and previous form values. Please refer to the code sample on how to use it
The Loader shows a spinning loading indicator to indicate a busy process (E.g. a network request). If isLoading is false, it renders its children. Please refer to the code sample on how to use it

WHen