Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

swissarmy-input-react

0.0.22 • Public • Published

Swiss-Army Input for React v0.0.22

Description

The "swissarmy-input-react" module is a ReactJS-component intended to produce useful and nice-looking inputs, complete with labels. The power of "swissarmy-input-react" is that it takes an interchangeable set of properties and takes care of any discrepancies between creating different types of inputs.

It currently supports text-, number-, select- and date-inputs, with more on the horizon.

Screenshots

Install

npm install swissarmy-input-react

Use

var SwissArmyInput = require('swissarmy-input-react')

SwissArmyInput(
    {
        id          : "myInput",
        type        : "number",
        className   : "anInput",
        labelText   : "My input:",
        placeholder : "Type here...",
        value       : "I'm a hot mess!",
        maxLength   : "23"
    }
)

The properties map to corresponding attributes of the input- or label-elements, but provide extended functionality in the case of the type-property:

The type-property will normally pass a string value to the type-attribute of the input-element, but if passed value is "date" or "select", then a datepicker-/select box-widget is initialized instead.

Todo

  • Live indicator for remaining characters (if maxLength-value is provided)
  • Support more input-types
  • Support for specifying date-format

Keywords

none

install

npm i swissarmy-input-react

Downloadsweekly downloads

2

version

0.0.22

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar