
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-input
Advanced tools
React input is a lightweight, dependency free component for building forms in React without having to think about what happens under the hood. It uses one component and an array of objects that describe the inputs in the form.
Install the component via npm: npm install react-input
.
<Form
fields={[
{
name: 'Email',
key: 'email',
type: 'email',
error: false,
required: false,
placeholder: 'Enter an email',
onChange: value => {
// handle a changed value on the input
},
renderAfter: () => (
<div>Include an element after the input, which is useful for instructional text or strength meters for passwords</div>
),
renderBefore: () => (
<div>Include an element before the input</div>
)
},
// additional inputs to include in the form
]}
onChange={state => /* handle form change */ }
onSubmit={state => /* handle form submit */ }
/>
For a detailed example, see the example project.
Name | Type | Description | Required | Default |
---|---|---|---|---|
fields | array | Array of inputs to include | true | |
labels | boolean | If false, labels are disabled | true | |
isPending | boolean | If true, an .is-pending class is added to the form | null | |
isRejected | boolean | If true, an .is-rejected class is added to the form | null | |
isFulfilled | boolean | If true, an .is-fulfilled class is added to the form | null |
The isPending
, isRejected
and isFulfilled
props are useful to add different styles to the form for different states.
Event | Description |
---|---|
onChange | Runs when any input in the form changes. The first parameter is the state of the form after the change. |
onSubmit | Runs when the submit button is clicked. The first parameter is the current state of the form. |
Only text based inputs can be used, e.g., email
, text
, tel
and password
.
Name | Type | Description | Required | Default |
---|---|---|---|---|
key | string | Unique key for the field | true | |
type | string | The type of input | 'text' | |
name | string | The name of input | ||
label | boolean | Label for the input field | true | |
required | boolean | Make field required | true | |
error | boolean | Is the input in an error state? | false | |
renderAfter | function | Element to render after the input | ||
renderBefore | function | Element to render before the input |
Event | Description |
---|---|
onChange | Runs when the value of the input changes. The first parameter is the value. |
In addition to the props listed above, all standard HTML input attributes are supported and can be used as props on the inputs.
Copyright 2015 Patrick Burtchaell. Licensed MIT.
FAQs
Easy forms for React
The npm package react-input receives a total of 113 weekly downloads. As such, react-input popularity was classified as not popular.
We found that react-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.