npm run build
npm start
Then open localhost:8800 in a browser.
NPM
npm install react-formable-inputs --save
Bower
bower install react-formable-inputs --save
http://willowtreeapps.github.io/react-formable-inputs/
Soon
Inputs for react-formable
npm run build
npm start
Then open localhost:8800 in a browser.
NPM
npm install react-formable-inputs --save
Bower
bower install react-formable-inputs --save
http://willowtreeapps.github.io/react-formable-inputs/
Soon
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.
@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.
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!)
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>;
}
})
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?
Displaying a word count and having a validator would be pretty awesome
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.