# @haszz/autosuggest

> Use this to create autocomplete text input which the text box can have both clear button and an activity indicator to show the background job

Latest version **1.1.2** (published 2019-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @haszz/autosuggest
pnpm add @haszz/autosuggest
yarn add @haszz/autosuggest
bun add @haszz/autosuggest
```

## 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.1.2 |
| Published | 2019-07-04 |
| First published | 2019-07-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | scott |
| Maintainers | haszz |
| Keywords | react-native, uber-text-input, autocomplete, progressive-input, clearable-input |

## Links

- npm: https://www.npmjs.com/package/@haszz/autosuggest
- Repository: https://github.com/haszz/react-native-progressive-input
- Homepage: https://github.com/haszz/react-native-progressive-input#readme
- Issues: https://github.com/haszz/react-native-progressive-input/issues
- npm.io page: https://npm.io/package/@haszz/autosuggest

## Dependencies (1)

- [@expo/vector-icons](https://npm.io/package/@expo/vector-icons.md) ^6.2.2

## Recent versions

- 1.1.2 (latest) — 2019-07-04
- 1.1.1 — 2019-07-04
- 1.0.0 — 2019-07-04

## README

# Progressive Input
![Screenshot](https://github.com/khaiql/react-native-progressive-input/blob/master/screenshot.gif)

[Progressive Input](https://github.com/khaiql/react-native-progressive-input) is used as a part of autocomplete solution. The control has clear button to clear text and activity indicator to show that background job is being performed.

## Getting started

`$ npm install react-native-progressive-input --save`

If you dont own the dependency `react-native-vector-icons`, please make sure you also run: 

* `npm install react-native-vector-icons --save`

* `react-native link`

on the terminal. This will add some necessary fonts and Info.plist updates on your xcode project.

## Usage
```javascript
import ProgressiveInput from 'react-native-progressive-input';

class Screen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      isLoading: false
    };
  }
  
  _onChangeText(text) {
    this.setState({isLoading: true, value: text});
    
    fetch("YOUR_URL_FOR_GETTING_SUGGESTION")
      .then((result) => {
        // Process list of suggestions
        
        this.setState({isLoading: false});
      });
  }

  render() {
    <ProgressiveInput
      value={this.state.value}
      isLoading={this.state.isLoading}
      onChangeText={this._onChangeText.bind(this)}
    />
  }
}

export default Screen;
```

## Properties

| Name                   | Type                              |
|------------------------|-----------------------------------|
| autoCorrect            | PropTypes.bool                    |
| keyboardType           | TextInput.propTypes.keyboardType  |
| multiline              | PropTypes.bool                    |
| placeholderTextColor   | PropTypes.string                  |
| returnKeyType          | TextInput.propTypes.returnKeyType |
| selectTextOnFocus      | PropTypes.bool                    |
| placeholder            | PropTypes.string                  |
| editable               | PropTypes.bool                    |
| autoCapitalize         | PropTypes.bool                    |
| maxLength              | PropTypes.number                  |
| multiline              | PropTypes.bool                    |
| onEndEditing           | PropTypes.func                    |
| onChange               | PropTypes.func                    |
| value                  | PropTypes.string                  |
| isLoading              | PropTypes.bool                    |
| textInputStyle         | TextInput.propTypes.style         |
| clearButtonIcon        | PropTypes.string                  |
| clearButtonColor       | PropTypes.string                  |
| clearButtonSize        | PropTypes.number                  |
| clearButtonStyle       | PropTypes.object                  |
| activityIndicatorStyle | ActivityIndicator.propTypes.style |
| onBlur                 | PropTypes.func                    |
| onChangeText           | PropTypes.func                    |
| onFocus                | PropTypes.func                    |
| onInputCleared         | PropTypes.func                    |

## Author
- Khai Le (Scott)
- Blog: [lequangkhai.wordpress.com](https://lequangkhai.wordpress.com)

## License
MIT

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