# npm-autocomplate-highlight-words

> This Autocomplate highlights words!

Latest version **1.0.0** (published 2020-06-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install npm-autocomplate-highlight-words
pnpm add npm-autocomplate-highlight-words
yarn add npm-autocomplate-highlight-words
bun add npm-autocomplate-highlight-words
```

## 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.0 |
| Published | 2020-06-01 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Soniya Prajapati |
| Maintainers | soniaprajapati |
| Keywords | npm, npm-autocomplate-highlight-words |

## Links

- npm: https://www.npmjs.com/package/npm-autocomplate-highlight-words
- npm.io page: https://npm.io/package/npm-autocomplate-highlight-words

## Alternatives

- [@oh-my-pi/pi-natives](https://npm.io/package/@oh-my-pi/pi-natives.md) — 51.8K weekly downloads
- [@capgo/capacitor-light-sensor](https://npm.io/package/@capgo/capacitor-light-sensor.md) — 3.0K weekly downloads
- [@heyhuynhgiabuu/pi-diff](https://npm.io/package/@heyhuynhgiabuu/pi-diff.md) — 492 weekly downloads
- [@lotsa/verdant-lang-asm](https://npm.io/package/@lotsa/verdant-lang-asm.md) — 38 weekly downloads
- [new-era-syntax](https://npm.io/package/new-era-syntax.md) — 20 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-06-01

## README

# npm-autocomplate-highlight-words

## How to use npm-autocomplate-highlight-words
Tested with RN >= 0.26.2. If you want to use RN < 0.26 try to install npm-autocomplate-highlight-words <= 0.0.5.

### Installation

```shell
$ npm install --save npm-autocomplate-highlight-words
```

### Example

```javascript
// ...

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

// ...
```

```javascript
//...

render() {
  return(
    <View>
      <View style={styles.autocompleteContainer}>
        <Autocomplete {/* your props */} />
      </View>
      <View>
        <Text>Some content</Text>
      </View>
    </View>
  );
}

//...

const styles = StyleSheet.create({
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  }
});

```

### Props
| Prop | Type | Description |
| :------------ |:---------------:| :-----|
| containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. |
| hideResults | bool | Set to `true` to hide the suggestion list.
| data | array | An array with suggestion items to be rendered in `renderItem({ item, i })`. Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. |
| inputContainerStyle | style | These styles will be applied to the container which surrounds the textInput component. |
| listContainerStyle | style | These styles will be applied to the container which surrounds the result list. |
| listStyle | style | These style will be applied to the result list. |
| onShowResult | function | `onShowResult` will be called when the autocomplete suggestions appear or disappear. |
| onStartShouldSetResponderCapture | function | `onStartShouldSetResponderCapture` will be passed to the result list view container ([onStartShouldSetResponderCapture](https://facebook.github.io/react-native/docs/gesture-responder-system.html#capture-shouldset-handlers)). |
| renderItem | function | `renderItem` will be called to render the data objects which will be displayed in the result view below the text input. |
| keyExtractor | function | `keyExtractor(item, i)` will be called to get key for each item. It's up to you which string to return as a key. |
| renderSeparator | function | `renderSeparator` will be called to render the list separators which will be displayed between the list elements in the result view below the text input. |
| renderTextInput | function | render custom TextInput. All props passed to this function. |
| flatListProps | object | custom props to FlatList[](https://facebook.github.io/react-native/docs/flatlist.html)]. |


## Contribute
Feel free to open issues or do a PR!

---
_Source: https://npm.io/package/npm-autocomplate-highlight-words · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._