1.2.0 • Published 5 years ago

react-simple-form2 v1.2.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

react-simple-form2

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

npm.io npm.io npm.io npm.io

Install

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.

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

NameTypeDescription
labelstringThe label of the input
namestringThe 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.

NameTypeDescription
optionsArray<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.

NameTypeDescription
extArray<string>An optional list of file extensions accepted by the component. E.g. (["png", "jpg"])
maxSizenumberThe maximum file size in bytes. This is optional
validateFunctionAn 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'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

Storybook

The stories for the component can be found here.

To run these stories:

  1. Clone the repository
  2. Run npm install to install dependencies
  3. 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
1.2.0

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago