Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/perushevandkhmelev-agency/react-native-material-textinput

Textual input component for React Native
https://github.com/perushevandkhmelev-agency/react-native-material-textinput

android ios material-design react react-component react-native textfield textinput typescript

Last synced: 9 days ago
JSON representation

Textual input component for React Native

Host: GitHub
URL: https://github.com/perushevandkhmelev-agency/react-native-material-textinput
Owner: perushevandkhmelev-agency
License: mit
Created: 2017-08-28T09:22:40.000Z (over 7 years ago)
Default Branch: main
Last Pushed: 2024-05-26T05:05:40.000Z (9 months ago)
Last Synced: 2024-11-10T06:29:35.492Z (3 months ago)
Topics: android, ios, material-design, react, react-component, react-native, textfield, textinput, typescript
Language: TypeScript
Homepage: https://www.npmjs.com/package/react-native-material-textinput
Size: 260 KB
Stars: 9
Watchers: 5
Forks: 13
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Material Design Text Input

[![npm version][npm-img]][npm-url]

[![npm downloads][npm-dls]][npm-url]

[![github issues][issues-img]][issues-url]

[![bundlephobia][bundlephobia-img]][bundlephobia-url]

[![license][license-img]][license-url]

Textual input component for React Native (iOS & Android).

![example][example-url]

## Usage

```typescript

import React, { useState } from 'react'

import TextInput, { TextInputRef } from 'react-native-material-textinput'

const Example = () => {

  const inputRef = useRef(null)

  const [name, setName] = useState('')

  const handleInputChange = (value: typeof name) => setName(value)

  return 

}

export default Example

```

## Properties

### Label

| name             | type   | default   |

| :--------------- | :----- | :-------- |

| label            | String |

| labelDuration    | Number | `200`     |

| labelColor       | String | `gray`    |

| labelActiveTop   | Number | `-18`     |

| labelActiveColor | String | `#3f51b5` |

| labelActiveScale | Number | `0.8`     |

### Placeholder

| Name             | Type   | Default |

| :--------------- | :----- | :------ |

| placeholder      | String |

| placeholderColor | String | `gray`  |

### Input

| Name                | Type              | Default  |

| :------------------ | :---------------- | :------- |

| ref                 | Ref |

| minHeight           | Number            |

| height              | Number            |

| maxHeight           | Number            |

| marginTop           | Number            |

| marginRight         | Number            |

| marginBottom        | Number            | `8`      |

| marginLeft          | Number            |

| paddingTop          | Number            | `20`     |

| paddingRight        | Number            | `0`      |

| paddingBottom       | Number            | `8`      |

| paddingLeft         | Number            | `0`      |

| color               | String            | `black`  |

| activeColor         | String            |

| fontFamily          | String            |

| fontSize            | Number            | `15`     |

| fontWeight          | String or Number  | `normal` |

| onFocus             | Function          |

| onBlur              | Function          |

| onChangeText        | Function          |

| onContentSizeChange | Function          |

### Underline

| Name                  | Type   | Default   |

| :-------------------- | :----- | :-------- |

| underlineDuration     | Number | `200`     |

| underlineHeight       | Number | `1`       |

| underlineColor        | String | `gray`    |

| underlineActiveColor  | String | `#3f51b5` |

| underlineActiveHeight | Number | `2`       |

### ErrorHelper

| Name            | Type   | Default   |

| :-------------- | :----- | :-------- |

| error           | String |

| errorPaddingTop | Number | `8`       |

| errorColor      | String | `#fc1f4a` |

| errorFontSize   | Number | `12`      |

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

## RTL

Supported using I18nManager from react-native

## License

The MIT License.

See [LICENSE](LICENSE)

[npm-url]: https://www.npmjs.com/package/react-native-material-textinput

[npm-img]: https://img.shields.io/npm/v/react-native-material-textinput.svg?style=flat

[npm-dls]: https://img.shields.io/npm/dt/react-native-material-textinput.svg?style=flat

[issues-url]: https://github.com/perushevandkhmelev-agency/react-native-material-textinput/issues

[issues-img]: https://img.shields.io/github/issues/perushevandkhmelev-agency/react-native-material-textinput.svg?style=flat

[bundlephobia-url]: https://bundlephobia.com/package/react-native-material-textinput

[bundlephobia-img]: https://img.shields.io/bundlephobia/min/react-native-material-textinput

[license-url]: https://github.com/perushevandkhmelev-agency/react-native-material-textinput/blob/main/LICENSE

[license-img]: https://img.shields.io/npm/l/react-native-material-textinput

[example-url]: https://github.com/perushevandkhmelev-agency/react-native-material-textinput/assets/20732110/77bfb57e-0d1e-42f0-a5e8-c2d4b82ce4df