- Notifications
You must be signed in to change notification settings - Fork2
⚡️ Utility function to handle input changes in React.
License
rmariuzzo/react-input-handler
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
⚡️ Utility function to handle input changes in React based onReact's handling multiple input docs.
- Package size is:1.66KB (0.8KB gzipped!).
- Supports all
<input />s,<textarea />and<select />elements. - Supports
<select multiple />. - Supports checkboxes with same name viaarray notation.
- Play well with deep state traversal usinglodash's set method.
- Multiple bundles:CJS, ESM and UMD.
yarn add react-input-handler
or
npm install react-input-handler --save
Two things needs to be done to usereact-input-handler:
- Create a bound function (see 2nd line in constructor).
- Attach the bound function to
onChangeevents.
importReactfrom'react'importReactInputHandlerfrom'react-input-handler'exportdefaultclassFormextendsReact.Component{constructor(props){super(props)this.state={}this.handleChange=ReactInputHandler.bind(this)this.handleSubmit=this.handleSubmit.bind(this)}render(){return(<formonSubmit={this.handleSubmit}><label>Fullname:</label><inputtype="text"name="user.fullname"onChange={this.handleChange}/><label>Biography:</label><textareatype="text"name="user.bio"onChange={this.handleChange}/><label> Are you a developer?</label><inputtype="checkbox"name="user.developer"value="yes"onChange={this.handleChange}/><buttontype="submit">Submit</button></form>)}handleSubmit(event){event.preventDefault()console.log(this.state)// Output: { user: { fullanme: "string", bio: "string", developer: true|false }}}}
React-input-handler is a single function which accept two argument: an event and a optional callback function that will be passed to thesetState method.
The objective is simple: handle input changes and persist them into the component's state.
By default,react-input-handler handles checkbox as boolean value. Sometimes, we may want two or more checkboxes to be handled as an array sharing the samename attribute. To achieve this we have to suffix thename attribute with[]. For example:
Before:
<inputtype="checkbox"name="one"value="1"onChange={this.inputHandler}checked/><inputtype="checkbox"name="two"value="2"onChange={this.inputHandler}/><inputtype="checkbox"name="three"value="3"onChange={this.inputHandler}checked/>// state: { one: true, two: false, three: true }
After:
<inputtype="checkbox"name="numbers[]"value="1"onChange={this.inputHandler}checked/><inputtype="checkbox"name="numbers[]"value="2"onChange={this.inputHandler}/><inputtype="checkbox"name="numbers[]"value="3"onChange={this.inputHandler}checked/>// state: { numbers: ["1", "3"] }
- Clone and fork this repo.
- Install dependencies running:
yarnornpm install. - Run tests.
- Prepare a pull request.
yarn test- to run all tests.yarn test -- --watchto run all tests in watch mode.
- Bump version:
npm version x.x.x -m 'Version %s.'. - Publish to NPM registry:
npm publish. - Publish the new created tag:
git push origin --tags.
Made with ❤️ byRubens Mariuzzo.
About
⚡️ Utility function to handle input changes in React.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.