Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bdryanovski/react-native-writebox
ReactNative autogrow/count/bottom textarea
https://github.com/bdryanovski/react-native-writebox
Last synced: 6 days ago
JSON representation
ReactNative autogrow/count/bottom textarea
- Host: GitHub
- URL: https://github.com/bdryanovski/react-native-writebox
- Owner: bdryanovski
- License: isc
- Created: 2017-06-12T20:11:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-26T07:47:03.000Z (almost 7 years ago)
- Last Synced: 2024-10-10T00:34:48.264Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 8.6 MB
- Stars: 54
- Watchers: 4
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-writebox ★33 - (iOS / Android) Facebook/Twitter textarea that autogrow and count characters. (Components / UI)
- awesome-reactnative-ui - react-native-writebox - native-writebox/master/assets/demo.gif)| (Others)
- awesome-react-native - react-native-writebox ★33 - (iOS / Android) Facebook/Twitter textarea that autogrow and count characters. (Components / UI)
- awesome-reactnative-ui - react-native-writebox - native-writebox/master/assets/demo.gif)| (Others)
- awesome-react-native - react-native-writebox ★33 - (iOS / Android) Facebook/Twitter textarea that autogrow and count characters. (Components / UI)
- awesome-react-native - react-native-writebox ★33 - (iOS / Android) Facebook/Twitter textarea that autogrow and count characters. (Components / UI)
README
# react-native-writebox
> ReactNative component for displaying Facebook/Twitter like textarea at the bottom of the screen
> with character counter.
[![NPM Version][npm-image]][npm-url]
Very basic component to display textarea at the bottom of the screen that will autogrow few lines
when the user input more content that we could display - also there is character counter that could
display how many characters are left.
## Installation
```sh
npm install react-native-writebox --save
```
Yarn:
```sh
yarn add react-native-writebox
```
## Usage example
Basic usage:
```js
import React, { Component } from 'react'
import WriteBox from 'react-native-writebox'
export default class Demo extends Component {
render() {
return (
{ console.log('Input value', value) } } >
{ this.props.children }
)
}
}
```
| Prop | Type | Default Value | Description |
| --- | --- | --- | --- |
| onSubmit | function | | When pressing `Done` or save button on the right this function will be called with the value of the textare as first argument |
| onBlur | function | | |
| onFocus | function | | |
| submitLabel | string | 'Send' | Text of the button on the right |
| placeholder | string | 'Type here ...' | Text of the textarea that will be display when there is no value |
| inputLimit | number | undefined | If set this is the number of max characters that could be inputed into the textarea - after that the counter will become red and will start to count negative values |
| autoFocus | boolean | false | When the component will finish rendering it auto set focus to the text area and will open the keyboard |
| value | string | '' | The value of the textarea at start |
| clearOnSubmit | boolean | false | When submiting the textarea if set to `true` the value of the component will be set to `undefined` |
## Author
Bozhidar Dryanovski – [@dryanovski](https://twitter.com/dryanovski)
Distributed under the ISC license. See ``LICENSE`` for more information.
[https://github.com/bdryanovski/react-native-writebox](https://github.com/bdryanovski/react-native-writebox)
## Contributing
1. Fork it ()
2. Create your feature branch (`git checkout -b feature/fooBar`)
3. Commit your changes (`git commit -am 'Add some fooBar'`)
4. Push to the branch (`git push origin feature/fooBar`)
5. Create a new Pull Request
[npm-image]: https://img.shields.io/npm/v/react-native-writebox.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/react-native-writebox
[wiki]: https://github.com/yourname/yourproject/wiki