frontegg-david/react-formik-ui

A simple component library, composed out of pure HTML form elements to make your live easier composing forms with Formik and React

React-Formik-UI

Overview

React-Formik-UI is a simple component library, composed out of pure HTML form elements like: form, input, select, checkbox, radio and textarea.

The Idea behind React-Formik-UI is to make the composition of forms with React and Formik even easier, so you don't have to write any HTML markup or extra components for your forms.

Each component makes use of Formiks context, there for you need to have Formik installed in your project.

NEW in v4:

Updated to use Formik v2: React Formik UI was updated to use Formik v2 and their hooks implementation. That means that you need to have Formik v2 installed to use React Formik UI v4. If you haven't updated, please do so.

Bundle size decreased: Wepack-Blocks got replased by a custom wepack config to render the styleguide, as well, since we could remove the connect HOC from Formik now the bundle gets minimized through the Rollup Tether plguin.

Markup, Styling and ClassNames

The markup for the components Input, PhoneInput, Select, Checkbox, Radio, Textarea, Datepicker and DropZone consists of a wrapper div, label, the main component, hint, and error message.

By default all component have NO styling applied at all.
This is intentionally, so you have the possibility to apply your own styling through css or scss by passing a custom className.
All the components used in the Form are scoped by the default classes, situated on the Form component, react-formik-ui form-wrapper

Each component has its corresponding component class (eg: PhoneInput component phoneInput ) followed a level deeper by its wrapper class (eg: phoneInput component phoneInput-wrapper ), as well as the class form-element.

You can pass the style prop on each component, to add custom inline styles to the component main element. Lets say you ad a style object through the style prop on the Select component, the inline styles will be applied to the select element of the Select component.

The className Prop can be passed on each component to add a css class directly to the component instead of the wrapper div, so libraries like Bootstrap can be used to style the form component.

The Mode prop: If you pass the mode prop to the Form component with structured as value, a minimal styling will be applied to add some structure to each form-element.

In case you pass the value themed through the mode prop on the Form component, the React-Formik-Ui Theme will be applied

Migrating from v3 to v4:

Just make shure tu use Formik v2 in your project.

Installation

Note: React Formik UI makes use of the recently released react Hooks API, therefore make sure that your project uses the latest React version

yarn add react-formik-ui

Usage

Peer Dependency

React-Formik-UI has Formik, React and react-dom as Peer dependencies.
So make shure to have those packages installed to your project to make use of React-Formik-UI.

yarn add formik

Form validations

To validate the form fields, the use of Yup is recommended.

yarn add yup

See the Styleguide with Demo and Examples here

Components Documentation and Examples

• Autocomplete
• Button
• Checkbox
• Datepicker
• DropZone
• Form
• Input
• PhoneInput
• Radio
• Select
• SubmitBtn
• Textarea
• Toggle

License

MIT © KaiHotz

Support

If you like the project and want to support my work, you can buy me a coffee :)