# cashestate-react-native-input

> A React Native TextInput with material style 😎

Latest version **1.0.1** (published 2019-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install cashestate-react-native-input
pnpm add cashestate-react-native-input
yarn add cashestate-react-native-input
bun add cashestate-react-native-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.1 |
| Published | 2019-08-22 |
| First published | 2019-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ruben Sospedra |
| Maintainers | olarewaopeyemi |
| Keywords | react-native, input, animation, TextInput, material-design, material |

## Links

- npm: https://www.npmjs.com/package/cashestate-react-native-input
- Repository: https://github.com/olarewajuakeemope/cashestate-react-native-input
- Homepage: https://github.com/sospedra/reinput#readme
- Issues: https://github.com/sospedra/reinput/issues
- npm.io page: https://npm.io/package/cashestate-react-native-input

## Alternatives

- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
- [cra-template-particles-typescript](https://npm.io/package/cra-template-particles-typescript.md) — 227 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-08-22
- 1.0.0 — 2019-07-21

## README

# Reinput

[![devDependency Status](https://david-dm.org/sospedra/reinput/dev-status.svg)](https://david-dm.org/sospedra/reinput#info=devDependencies)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![npm](https://img.shields.io/npm/dm/reinput.svg)](https://www.npmjs.org/package/awesome-badges)

A React Native TextInput with material style 😎

<img alt="reinput-gif" width="500" src="https://user-images.githubusercontent.com/3116899/35905643-224d97fc-0be8-11e8-8a93-9f5e676b487f.gif" />

### Installation

`npm install --save reinput`

`yarn add reinput`

### Motivation

Styling react-native inputs can be cumbersome. And most of them heavily relies
onto the material design patterns. This style layer over the regular `TextInput`
paves the way towards and easier and faster development.

We also expose a ReinputButton. Check the docs ;)

### Usage

```js
import Reinput from 'reinput'

const Input = () => (
  <View>
    <Reinput label='name' />
    <Reinput error='Handles error' />
    <Reinput label='name' value='control value from outside' />
    <Reinput label='name' defaultValue='initial value' />
    <Reinput label='name' onChangeText={/* any TextInput prop */} />
  </View>
)
```

### Props

#### Input

Name                  | Type               | Default
:-------------------- |:------------------ |:----------
activeColor           | String             |
color                 | String             | `#000000`
fontFamily            | String             |
fontSize              | Number             | `15`
fontWeight            | String or Number   | `normal`
height                | Number             | `64`
marginBottom          | Number             | `8`
marginLeft            | Number             |
marginRight           | Number             |
marginTop             | Number             |
maxHeight             | Number             |
minHeight             | Number             |
onBlur                | Function           |
onChangeText          | Function           |
onContentSizeChange   | Function           |
onFocus               | Function           |
paddingBottom         | Number             | `8`
paddingLeft           | Number             | `0`
paddingRight          | Number             | `0`
paddingTop            | Number             | `20`
register              | Function           | `noop`

* Register exposes the `TextInput` ref component out

#### Label

name                  | type               | default
:-------------------- |:------------------ |:------------------
label                 | String             |
labelActiveColor      | String             | `#3f51b5`
labelActiveScale      | Number             | `0.8`
labelActiveTop        | Number             | `-18`
labelColor            | String             | `#757575`
labelDuration         | Number             | `200`

#### Icon

Name                  | Type               | Default
:-------------------- |:------------------ |:----------
icon                  | Element            |
iconOverlay           | Element            |

#### Placeholder

Name                  | Type                    | Default
:-------------------- |:----------------------- |:----------
placeholder           | String                  |
placeholderColor      | String                  | `#757575`
placeholderVisibility | boolean|undefined|null  |

How `placeholderVisibility` works?

```
{
    Always: 1,
    Never: null,
    OnFocus: true,
    OnBlur: false,
}
```

#### Underline

Name                  | Type               | Default
:-------------------- |:------------------ |:----------
underlineActiveColor  | String             | `#3f51b5`
underlineActiveHeight | Number             | `2`
underlineColor        | String             | `#757575`
underlineDuration     | Number             | `200`
underlineHeight       | Number             | `1`

#### Error

Name                  | Type               | Default
:-------------------- |:------------------ |:----------
error                 | String             |
errorColor            | String             | `#fc1f4a`
errorStyle            | TextStyle          |
errorStyle.fontSize   | Number             | `12`
errorStyle.paddingTop | Number             | `4`
errorStyle.paddingBottom| Number           | `4`

And **also** all the [TextInput](https://facebook.github.io/react-native/docs/textinput.html#props) properties will work.

### ReinputButton

We also expose a component that looks like an Input but it's a button so accepts `onPress` prop.
We do following the [material design guidelines](https://material.io/design/components/text-fields.html).

Props are the same as the Input but it also accepts an `onPress` and doesn't have hooks for focus/blur events.

```js
import { ReinputButton } from 'reinput'

const Input = () => (
  <ReinputButton
    label='This is not an Input'
    value='If there is no value it shows the label as placeholder'
    onPress={/* whatever callback */}
  />
)
```

### Example

I'm working on an expo demo. So far, you can clone the project and check the example dir.
It's the one of the gif ;)

### Credits

Style patterns are mainly based on [Material Design](https://material.io/guidelines/components/text-fields.html#); properly adapted for iOS.

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