https://github.com/penx/multi-input-input
React HOC to modify a component with multiple inputs to behave as a single input
https://github.com/penx/multi-input-input
Last synced: 5 months ago
JSON representation
React HOC to modify a component with multiple inputs to behave as a single input
- Host: GitHub
- URL: https://github.com/penx/multi-input-input
- Owner: penx
- Created: 2018-09-18T18:01:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-20T18:00:29.000Z (almost 7 years ago)
- Last Synced: 2025-07-12T04:39:12.504Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Multi Input Input
A React higher order component that modifies a given component containing multiple inputs to behave as though it was a single input by:
- merging values in to an object
- not calling onBlur when going from field to field within the same component
- not calling onFocus when going from field to field within the same component
# Why?
See
https://medium.com/@penx/form-elements-in-presentational-component-packages-a618e9aa7416
## Example problem
You have 3 inputs that combined together form a date. You have these 3 input inside a single styled component and want to plug this in to your form code, e.g. using Redux Form or Final Form.
You want the 3 inputs to behave as though they were a single input: having a single value prop and handling the onBlur, onFocus, onChange events as though they were a single input, as well as allowing the parent to [get refs](https://reactjs.org/docs/refs-and-the-dom.html) to each individual input.
# Usage:
For example, 3 inputs could be combined to form a single date input:
```jsx
import React from 'react';
import PropTypes from 'prop-types';
import multiInputInput from 'multi-input-input';
class OptionalDateInput extends React.Component {
inputs = {}
renderInput(label, key) {
return (
{label}:
this.props.onChange(e, key)}
onBlur={e => this.props.onBlur(e, key)}
onFocus={e => this.props.onFocus(e, key)}
ref={(input) => { this.inputs[key] = input; this.props.refs(this.inputs); }}
/>
);
}
render() {
return (
{this.renderInput('Day', 'day')}
{this.renderInput('Month', 'month')}
{this.renderInput('Year', 'year')}
);
}
}
OptionalDateInput.propTypes = {
value: PropTypes.shape({
day: PropTypes.number,
month: PropTypes.number,
year: PropTypes.number,
}),
refs: PropTypes.func,
onChange: PropTypes.func,
onBlur: PropTypes.func,
onFocus: PropTypes.func,
};
OptionalDateInput.defaultProps = {
value: {
day: null,
month: null,
year: null,
},
refs: () => null,
onChange: () => null,
onBlur: () => null,
onFocus: () => null,
};
export default multiInputInput(OptionalDateInput);
```
See https://github.com/penx/pcp-form-example/blob/master/packages/presentational-components/src/components/input/OptionalDateInput.js