# react-pretty-input

> A pretty input form field for React projects.

Latest version **1.0.13** (published 2018-08-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-pretty-input
pnpm add react-pretty-input
yarn add react-pretty-input
bun add react-pretty-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 | 1.0.13 |
| Published | 2018-08-20 |
| First published | 2018-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 158.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | OSCAR MARTIN |
| Maintainers | elmao79 |
| Keywords | react, reactjs, input |

## Links

- npm: https://www.npmjs.com/package/react-pretty-input
- Repository: https://github.com/elmao79/react-pretty-input
- Homepage: https://github.com/elmao79/react-pretty-input#readme
- Issues: https://github.com/elmao79/react-pretty-input/issues
- npm.io page: https://npm.io/package/react-pretty-input

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.13 (latest) — 2018-08-20
- 1.0.12 — 2018-07-30
- 1.0.11 — 2018-07-15
- 1.0.10 — 2018-07-12
- 1.0.9 — 2018-07-12
- 1.0.8 — 2018-07-10
- 1.0.7 — 2018-07-10
- 1.0.6 — 2018-07-10
- 1.0.5 — 2018-07-10
- 1.0.4 — 2018-07-10
- 1.0.3 — 2018-07-09
- 1.0.2 — 2018-07-08
- 1.0.1 — 2018-07-08

## README

# react-pretty-input

## Overview
A pretty input and textarea form fields for React projects.

[![NPM version][npm-image]][npm-url]
[![Build Status][travis-badge]][travis-url]
[![Coverage Status][coverage-badge]][coverage-url]
[![npm download][download-image]][download-url]
[![MIT License][license-badge]][license-url]

## [Changelog](https://github.com/elmao79/react-pretty-input/blob/master/CHANGELOG.md)

## Installation
[![react-pretty-input](https://nodei.co/npm/react-pretty-input.png)](https://npmjs.org/package/react-pretty-input)

## Usage

ES6 import:
```js
import { PrettyInputText } from 'react-pretty-input';
```

```jsx
// In JSX
<PrettyInputText name="email" labelText="Email Address" errorValue="Invalid Email Address" isRequired />

// In vanilla JS
React.createElement(PrettyInputText, { name: 'email', labelText: 'Email Address', errorValue: 'Invalid Email Address', isRequired: true});
```

## PrettyInputText Props

#### `name` (required) (type: `string`)
This prop is the name attribute of the generated input tag.

#### `labelText` (required) (type: `string`)
This prop is the description string of the field. It's used to show the placeholder and the label of the input to describe it.

#### `inputValue` (optional) (type: `string`)
This prop is the default value of the component.

#### `errorValue` (optional) (type: `string`) (default: `'Error'`)
This prop is the description string of error occurred in the field. It's used to show the error in the label to describe it.

#### `size` (optional) (type: `integer`) (default: `50`)
This prop is used to limit the input string length of the field.

#### `isRequired` (optional) (type: `boolean`) (default: `false`)
This prop is used to indicate if the input string of the field is required. If the prop value is `true` and the field is empty an error is showed in label and border field.

#### `onValidation` (optional) (type: `function`) (default: `inputValue => true`)
This prop is used to pass a callback function to validate de input value of the component. This function must return a boolean value.

#### `onChange` (optional) (type: `function`) (default: `null`)
This prop is used to pass a callback function invoked on input text change.

#### `onKeyPress` (optional) (type: `function`) (default: `null`)
This prop is used to pass a callback function invoked on every key press event.

#### `labelColor` (optional) (type: `string`) (default: `#0069ff`)
This prop is used to set the color of the label.

#### `backgroundColor` (optional) (type: `string`) (default: `#fff`)
This prop is used to set the background color of the component.

#### `width` (optional) (type: `integer`) (default: `200`)
This prop is used to set the css width of the component.

## PrettyInputTextArea Props

#### `name` (required) (type: `string`)
This prop is the name attribute of the generated input tag.

#### `labelText` (required) (type: `string`)
This prop is the description string of the field. It's used to show the placeholder and the label of the input to describe it.

#### `inputValue` (optional) (type: `string`)
This prop is the default value of the component.

#### `size` (optional) (type: `integer`) (default: `50`)
This prop is used to limit the input string length of the field.

#### `isRequired` (optional) (type: `boolean`) (default: `false`)
This prop is used to indicate if the input string of the field is required. If the prop value is `true` and the field is empty an error is showed in label and border field.

#### `onChange` (optional) (type: `function`) (default: `null`)
This prop is used to pass a callback function invoked on input text change.

#### `onKeyPress` (optional) (type: `function`) (default: `null`)
This prop is used to pass a callback function invoked on every key press event.

#### `labelColor` (optional) (type: `string`) (default: `#0069ff`)
This prop is used to set the color of the label.

#### `backgroundColor` (optional) (type: `string`) (default: `#fff`)
This prop is used to set the background color of the component.

#### `width` (optional) (type: `integer`) (default: `200`)
This prop is used to set the css width of the component.

## Contributing
Use [Github issues](https://github.com/elmao79/react-pretty-input/issues) for feature requests and bug reports. We actively accept pull requests.

## License

MIT

[npm-image]: https://img.shields.io/npm/v/react-pretty-input.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-pretty-input
[download-image]: https://img.shields.io/npm/dm/react-pretty-input.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-pretty-input
[license-badge]: https://img.shields.io/npm/l/react-pretty-input.svg?style=flat-square
[license-url]: https://github.com/elmao79/react-pretty-input/blob/master/LICENSE
[coverage-badge]: https://coveralls.io/repos/github/elmao79/react-pretty-input/badge.svg?branch=master
[coverage-url]: https://coveralls.io/github/elmao79/react-pretty-input?branch=master
[travis-badge]: https://travis-ci.org/elmao79/react-pretty-input.svg?branch=master
[travis-url]: https://travis-ci.org/elmao79/react-pretty-input

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