npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-formik-ui

v5.8.0

Published

Plain form components for make use of formik even easier

Downloads

1,251

Readme

NPM npm bundle size license npm

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 a text prop for rnedering the text of the button
  • mode prop has been renamed to styling, the values structured and themed for the it also have been renamed to structure and theme.
  • Datepicker component has been renamed to `DatePicker``
  • The style prop has been removed form the DatePicker and PhoneInputcomponent

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 :)

paypal