React Advanced Input
react-advanced-input is an input library aiming improve on the base HTML input's by extending on them and bringing them together with extra features.
Why should you use React Advanced Input ?
react-advanced-input is mostly a 1:1 mapping of input/textarea/select to Input, but with extra features like simplifying select's and making textarea part of Input.
The future of React Advanced Input
- add
onChangeValueon all input's to have a normalized version of the changed value instead of passing by the event and figuring things out - add full new custom inputs, some in mind: "boolean", "int", etc.
- implement a way to extend
<Input>type's with extra types with first or third-party addon packages
Installation
Npm
npm i --save react-advanced-input
Yarn
yarn add react-advanced-input
Usage
Importing
import Input from 'react-advanced-input'
// or import { Input } from 'react-advanced-input'Example usage
const App = () => {
const [form, setForm] = useState({
text: '',
number: 0,
textarea: '',
select: '',
});
const handleChange = (e) => {
setForm((prevForm) => ({
...prevForm,
[e.target.name]: e.target.value,
}));
}
return (
<>
<Input
type="text"
name="text"
value={form.text}
onChange={handleChange}
/>
<Input
type="number"
name="number"
value={form.number}
onChange={handleChange}
/>
<Input
type="textarea"
name="textarea"
value={form.textarea}
onChange={handleChange}
/>
<Input
type="select"
name="select"
value={form.select}
options={[
{ value: 'foo' },
{ value: 'bar', label: 'Ipsum' },
{ value: 'baz', label: 'Baz' },
]}
onChange={handleChange}
/>
</>
);
};