# hire-forms-input

> React Component representing an input element.

Latest version **3.0.5** (published 2018-07-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install hire-forms-input
pnpm add hire-forms-input
yarn add hire-forms-input
bun add hire-forms-input
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2018-07-05 |
| First published | 2015-06-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | gijsjan.brouwer@huygens.knaw.nl |
| Maintainers | gijsjan |

## Links

- npm: https://www.npmjs.com/package/hire-forms-input
- Repository: https://github.com/Hire-Forms/hire-forms-input
- Issues: https://github.com/Hire-Forms/hire-forms-input/issues
- npm.io page: https://npm.io/package/hire-forms-input

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.5

## Recent versions

- 3.0.5 (latest) — 2018-07-05
- 3.0.4 — 2017-09-11
- 3.0.3 — 2017-07-10
- 3.0.2 — 2017-07-07
- 3.0.1 — 2017-03-12
- 3.0.0 — 2017-02-06
- 2.1.0 — 2016-08-09
- 2.0.0 — 2016-04-28
- 1.2.1 — 2015-08-26
- 1.2.0 — 2015-08-14
- 1.1.0 — 2015-08-14
- 1.0.4 — 2015-08-14
- 1.0.3 — 2015-08-14
- 1.0.2 — 2015-06-17
- 1.0.1 — 2015-06-16
- … 1 more at https://npm.io/package/hire-forms-input/versions

## README

# Hire Forms Input

React Component representing an input element.

## Value as a property

The `<Input />`s value isn't an internal state, but is
passed as a property! In other words: your app has state and
passes it to the `<Input />`. See the examples.

## Examples

### Default

	render() {
		return (
			<Input
				onChange={this.handleChange.bind(this)}
				placeholder="Enter value..."
				value={this.state.value} />
		);
	}

### With validation

The onInvalid prop isn't required. If a validator function returns `isValid: false` and a message string, the message string will be a TextNode of `<div className="hire-forms-invalid-message" />`.

	let validateNumbersOnly = function(value) {
		// Handle validation.
		let re = /^\d+$/;
		let isValid = re.test(value);

		// Return a validator object.
		return {
			isValid: isValid,
			message: isValid ? "" : "Only numbers are allowed."
		};
	};

...

	handleInvalid(message, value) {

	}

...

	render() {
		return (
			<Input
				onChange={this.handleChange.bind(this)}
				onInvalid={this.handleInvalid.bind(this)}
				placeholder="Enter value..."
				validate={validateNumbersOnly}
				value={this.state.value} />
		);
	}

---
_Source: https://npm.io/package/hire-forms-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._