willowtreeapps / react-formable-inputs

Inputs for react-formable

react-formable-inputs

Instructions

Build

npm run build

Dev

npm start

Then open localhost:8800 in a browser.

Installation

NPM

npm install react-formable-inputs --save

Bower

bower install react-formable-inputs --save

Docs

http://willowtreeapps.github.io/react-formable-inputs/

Quickstart

Soon

react-formable-inputs's Issues

Formatters / Deformatters

• Phone number
• Credit Card
• Date
• Time
• Alpha only
• Numeric only
• Regexp
• Length

Not sure how feasible this is, but having phone numbers / date / time be a higher order component where you specify a format could be pretty cool.

Floating Label Wrapper

Base Input

Base Textarea

Base Select

Field Wrapper

@uttrasey, @emilyseibert, @tlegard, @oconn, @jeffpamer, @trevorsenior: A proposition for making high order wrappers to extend base inputs.

Throwing around several ideas. The basic question is, what belongs in the base field component and what doesn't. The next question is how do we extend these base components. For example, floating labels are a nice to have but do they belong in the base component? What about counted textareas / inputs? These seems like nice to haves which could easily be abstracted into wrappers, but then we get into onion like components. Good, Bad? Who knows.

Proposed API

These components wrap a single child. This child calls a onChange callback with the synthetic event or implements getValue (or both). These wrapper themselves behave as inputs, so we could attach a ref to them and call getValue or just continue using their child. An interesting consequence is you can use these wrappers as transformers for other inputs that don't conform to our Form library (such as stateless inputs!)

Examples

Example: Single use

If you just want a one off input that is counted, you can simply wrap that input when you need it. Here we are making a floated label input. Note, we are using the default input DOM node here.

<FloatingLabelWrapper label="Username">
    <input type="text" />
</FloatingLabelWrapper>

Example: Composing wrappers

Here we have a one off input that is asyncly validated, has a floating wrapper, and has a text limit applied to it. Looks a little hideous, yes, but we can compose them.

<AsyncValidationWrapper async={function() { /* ... */}}>
    <CountedTextWrapper count={500}>
        <FloatingLabelWrapper label="Username">
            <input type="text" />
        </FloatingLabelWrapper>
    </CountedTextWrapper>
</AsyncValidationWrapper>

Example: Making our own project specific inputs

If we wanted all our inputs in our project to have floating labels, we can make those components easily.

React.createClass({
    getValue() {
        return this.refs.input.getValue();
    },
    render() {
        return <FloatingLabelWrapper label={this.props.label}>
            <Input ref="input" {...this.props}/>
        </FloatingLabelWrapper>;
    }
})

Closing thoughts

First, we need to identify the 80% features that will go in inputs, having a wrapper for a common task is cumbersome at best. Second, this is just one of many ways we could have wrapper components. We could go down a decorator route which could use this component to wrap any input (for easier use).

shrug, thoughts?

Base Radios

Counted Wrapper

Displaying a word count and having a validator would be pretty awesome