reinput
Version:
A React Native TextInput with material style 😎
160 lines (121 loc) • 5.52 kB
Markdown
# Reinput
[](https://david-dm.org/sospedra/reinput#info=devDependencies)
[](http://standardjs.com/)
[](https://github.com/semantic-release/semantic-release)
[](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`
textAlign | String | `left`
* 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.