react-safe-universal-inputs
v3.0.1
Published
This module fixes a race condition when using controlled inputs combined with server-side rendering. If an input is changed before React is loaded, the change will not be registered.
Downloads
797
Readme
react-safe-universal-inputs
This module fixes a race condition when using controlled inputs combined with server-side rendering. If an input is changed before React is loaded, the change will not be registered.
Demo: https://react-safe-universal-inputs.herokuapp.com
Usage:
yarn add react-safe-universal-inputs
or npm install --save react-safe-universal-inputs
Optionally pass a function to onEarlyInput
that handles a changed node, otherwise onChange
is called.
Called once with componentDidMount
and is only called if the value has changed before the initial react render.
import React, { Component } from 'react';
import { Input, Select } from 'react-safe-universal-inputs';
export default class Example extends Component {
constructor() {
super();
this.state = {
text: 'initial text',
select: 'yes',
};
this.handleEarlyInput = this.handleEarlyInput.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleEarlyInput(inputNode) {
const value = inputNode.value;
this.setState(() => {
return {
[inputNode.name]: value,
}
});
}
handleChange(event) {
event.preventDefault();
const type = event.target.type;
const name = event.target.name;
this.setState(() => {
return {
[name]: value,
};
});
}
render() {
return (
<form>
<Input
type="text"
name="text"
onChange={this.handleChange}
value={this.state.text}
/>
<Select
name="select"
onEarlyInput={this.handleEarlyInput}
onChange={this.handleChange}
value={this.state.select}
>
<option value="yes">yes</option>
<option value="no">no</option>
</Select>
</form>
);
}
}
See the /example/
folder / demo for more examples.
Known Issues:
- ref is not accessible.
<textarea
is not currently supported.