Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cap32/react-input-component
🚀 A better alternative to react built-in input components
https://github.com/cap32/react-input-component
component controlled input react select textarea uncontrolled
Last synced: about 1 month ago
JSON representation
🚀 A better alternative to react built-in input components
- Host: GitHub
- URL: https://github.com/cap32/react-input-component
- Owner: Cap32
- License: mit
- Created: 2017-03-22T07:52:33.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-13T10:41:14.000Z (over 6 years ago)
- Last Synced: 2024-11-27T14:04:05.228Z (about 1 month ago)
- Topics: component, controlled, input, react, select, textarea, uncontrolled
- Language: JavaScript
- Homepage:
- Size: 53.7 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-input-component
[](https://circleci.com/gh/Cap32/react-input-component) [](https://travis-ci.org/Cap32/react-input-component)
🚀 A better alternative to react built-in input components
## Motivations
1. Before use built-in react inputs, you may need to know what the hell are [controlled and uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/)
2. Controlled input has a [bug](https://github.com/facebook/react/issues/3926)
3. Controlled input is slow
4. Uncontrolled input is not powerful
So I created this module to avoid the problems above.
## Installation
```bash
yarn add react-input-component
```
## Usages
Just like built-in input components, but no `defaultValue` or `defaultChecked` prop.
###### Example
```js
import React from 'react';
import { Input } from 'react-input-component';
export default () =>
```
###### Components
- Input
- TextArea
- Select
## Notes
- All styles are the same with react built-in inputs
- All react built-in inputs' props are supported, except `defaultValue` and `defaultChecked`
- To get the DOM, use `findDOMNode(input)` or `input.dom`. (This `input` refs to an `Input` instance, like ``)
- Form data (value or checked) would be handled by the DOM itself.
- Form data could also be changed by passing new `value` prop to component.
## Caveat
If the new `value` prop is equal to the prev `value` prop, form data would not be updated, even if form data is not equal to the `value` prop.
```js
import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';
import { Input } from 'react-input-component';
class Bad extends Component {
state = { value: 'a' };
componentDidMount() {
findDOMNode(this).value = 'b'; // Simulate user typing
// Try to reset `value` to "a", but failed
// Because the new `value` prop is equal to the prev `value` prop
this.setState({ value: 'a' }); // => BAD
}
render() {
return ();
}
}
render(, document.getElementById('root'));
```
To resolve this problem, you could change the DOM value directly, or add a special `updateKey` prop.
`updateKey` helps Input component to decide to update. If `updateKey` changes, form data changes.
```js
import React, { Component } from 'react';
import { render, findDOMNode } from 'react-dom';
import { Input } from 'react-input-component';
class Good extends Component {
state = { value: 'a' };
componentDidMount() {
findDOMNode(this).value = 'b'; // Simulate user typing
// Try to reset `value` to "a"
// Adding a new `updateKey` to force upate
this.setState({ value: 'a', updateKey: Math.random() }); // => GOOD
}
render() {
return ();
}
}
render(, document.getElementById('root'));
```
## License
MIT © Cap32