react-formik-ui
v5.8.0
Published
Plain form components for make use of formik even easier
Downloads
1,251
Readme
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 v5:
Typescript: React-Formik-UI is now written in Typescript
There where several breaking changes, if you come from version 4 please refer to Migrating from v4 to v5
section in this document for all the changes
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 Styling prop: If you pass the styling
prop to the Form
component with structure
as value, a minimal styling will be applied to add some structure to each form-element
.
In case you pass the value theme
through the styling
prop on the Form
component, the React-Formik-Ui Theme will be applied
Migrating from v4 to v5:
Button
component has been removed, therfore you should use your own.SubmitBtn
component now also recieves atext
prop for rnedering the text of the buttonmode
prop has been renamed tostyling
, the valuesstructured
andthemed
for the it also have been renamed tostructure
andtheme
.- Datepicker component has been renamed to `DatePicker``
- The
style
prop has been removed form theDatePicker
andPhoneInput
component
Installation
Note: React Formik UI makes use of the recently released react Hooks
API, therefore make sure that your project uses at least React
version 16.13.1
yarn add react-formik-ui
or
npm i -S 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
or
npm i -S formik
Form validations
To validate the form fields, the use of Yup is recommended.
yarn add yup
or
npm i -S yup
See the Styleguide with Demo and Examples here
Components Documentation and Examples
License
MIT © KaiHotz
Support
If you like the project and want to support my work, you can buy me a coffee :)