Skip to content

Commit

Permalink
Update README
Browse files Browse the repository at this point in the history
  • Loading branch information
mrlaessig committed Feb 22, 2016
1 parent b51ba3d commit 1931413
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 0 deletions.
54 changes: 54 additions & 0 deletions README.md
@@ -1 +1,55 @@
# react-native-autocomplete-input
This is a pure javascript react-native component to display autocomplete suggestions given an array of objects respective to the input text.

![Autocomplete Example](https://raw.githubusercontent.com/l-urence/react-native-autocomplete-input/master/example.gif)

## How to use react-native-autocomplete-input
Fist things first install the component from npmjs.org:

```shell
$ npm install --save react-native-autocomplete-input
```

or install HEAD from github.com:

```shell
$ npm install --save l-urence/react-native-autocomplete-input
```

This brief example should illustrate the usage of the autocomplete:

```javascript
// ...
render() {
const { query } = this.state;
const data = this._filterData(query)
<Autocomplete
data={data}
defaultValue={query}
onChangeText={text => this.setState({query: text})}
renderItem={data => (
<TouchableOpacity onPress={() =>
this.setState({query: data})
}
>
<Text>{data}</Text>
</TouchableOpacity>
)}
/>
}
// ...
```

The full example from the screenshot can be found [here](https://github.com/l-urence/react-native-autocomplete-input/blob/master/example/Example.js)

## react-native-autocomplete-input props
| Prop | Type | Description |
:------------ |:---------------:| :-----|
| containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. |
| data | array | Assign an array of data objects which should be rendered in respect to the entered text. |
| listStyle | style | These style will be applied to the result list view. |
| renderItem | function | `renderItem` will be called to render the data objects which will be displayed in the result view below the text input. |


## Contribute
Feel free to open issues or do a PR!
Binary file added example.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1931413

Please sign in to comment.