react-simple-form2 v1.2.0
react-simple-form2
A collection of Formik based form components I use for my apps
Install
npm i -D react-simple-form2
This library marks
formik
as an external dependency. Please make sure you haveformik^2.1.4
installed in your project.
Usage
For a complete usage code sample, see the stories for this component here
Props
Components
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 anoptions
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 anoptions
prop. This is the same as that of theCheckGroupInput
.The
FileInput
accepts all the common props in addition toext
,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
Utilities
The
FormikEffect
is used to notify components outside the form when any of the form values change. It'sonChange
function receives the current and previous form values. Please refer to the code sample on how to use itThe
Loader
shows a spinning loading indicator to indicate a busy process (E.g. a network request). IfisLoading
is false, it renders its children. Please refer to the code sample on how to use it
WHen
Storybook
The stories for the component can be found here.
To run these stories:
- Clone the repository
- Run
npm install
to install dependencies - Run
npm run storybook
to start the storybook server.
For more information on Storybook, click here
Maintainers
Support
If you'd like to support this project, you can do so by becoming a patreon on Patreon
It would be really helpful if you can star the project on Github
Changelog
- 1.1.0
- Add visibility toggle to
<StringInput />
if its type is "password". - Added the
<Loader />
utility component
- Add visibility toggle to