Formatta NPM | npm.io

Formatta

An abstraction layer for working with Forms in a React/Redux application, and leverages the Formik higher-order component

Install

npm install formatta

Usage

No description yet :(

Components

Form Field

An abstraction layer over InputField with (optional) <label /> and field-level Error. It passes through the appropriate properties to the instance of InputField under the hood. Additionally, it supports placeholder and label, the latter of which will render a <label /> element before the actual <input /> tag (except in the case of <input type=checkbox />, where the label renders after). Make sure to set your id property if you are setting a label property, since the label must refer to the associated <input /> element by its unique id.

Checkbox Label

A styled checkbox that is wrapped and the onClick is attached to the wrapper (value is still bound to the underlying <input type=checkbox />) to facilitate the checkbox behavior.

Dropdown Arrow

Although it sounds like a component proper, this is really just a wrapper for a React Widgets component to re-style its bland caret arrow. Additionally you can remove the arrow (and enclosing square) altogether. Just import either WithDropdownArrow or WithoutDropdownArrow from this component file.

Field Error

An error message that attaches near the FormField

Form

A simple, small, slightly-styled HTML <form>

Form Combobox

No description yet :(

Form Checkbox

No description yet :(

Form DateField

No description yet :(

Form Dropdown

No description yet :(

Form Error

No description yet :(

Form Field

An abstraction layer around the default Formik Field to give it an API that is similar to how you would use a the Field component from ReduxForm. This makes it easier to avoid breaking API changes in a (primarily) ReduxForm application.

Form MultiSelect

No description yet :(

Form Radio

No description yet :(

Form Toggle Button

No description yet :(

Form Label Button

No description yet :(

Form Search Select

No description yet :(

Input Field

A versatile HTML <input /> (or <textarea />) field, meant to be used in an HTML form. It supports numerous type='<input type', but defaults to a value of type='text'. It also allows you to also specify a value of "textarea" (which is not part of the native <input />). This way you can use one component to support any type of HTML form input. Event handlers and are passed through directly.