https://github.com/jsnavarroc/react-native-search-engine
It is a type of search engine like the "html5's browsers input", it can be used to auto-complete words or to search for elements within an array or object.
https://github.com/jsnavarroc/react-native-search-engine
react react-native react-native-search-engine search-engine
Last synced: 6 months ago
JSON representation
It is a type of search engine like the "html5's browsers input", it can be used to auto-complete words or to search for elements within an array or object.
- Host: GitHub
- URL: https://github.com/jsnavarroc/react-native-search-engine
- Owner: jsnavarroc
- License: lgpl-3.0
- Created: 2020-07-18T02:02:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-12T18:42:18.000Z (almost 5 years ago)
- Last Synced: 2024-02-22T19:04:03.171Z (over 2 years ago)
- Topics: react, react-native, react-native-search-engine, search-engine
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-search-engine
- Size: 149 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Search Engine
## Alert the library is subject to change at least the next 2 months.
### >> [Examples](https://github.com/jsnavarroc/serchEngineExample)
### It is a type of search engine like the "html5's browsers input", it can be used to auto-complete words or to search for elements within an array or object.
------------
## Documentation
### React Native Search Engine Component
| Name | Description | Default | Type | Criterion |
|---------------------------|------------------------------------------|-------------|---------|-----------|
| searchKey | If you are working with an array of objects and you want to search by a specific property that all objects have in common, can put something like 'user.name' | "" | String | Optional |
| value | If you want me to submit an initial search | "" | String | Optional |
| data | The data to searching | [ ] | Array | Optional |
| textInfoStyle | Text information styles | { } | Object | Optional |
| buttonEnabled | If you want show or not the button | true | Boolean | Optional |
| showAllMode | If you want to show all options when it can't find anything | false | Boolean | Optional |
| showNoResults | Doesn't show the options, but the onChange Element gives me the filtered data | false | Boolean | Optional |
| textInputStyle | Input text styles | { } | Object | Optional |
| placeholder | Help text | 'Search' | String | Optional |
| containerInputStyle | Styles of input text containing | { } | Object | Optional |
| containerTextInfoStyle | Styles of information text containing | { } | Object | Optional |
| containerTextError | Styles of input text containing | { } | Object | Optional |
| textInfoStyleError | Styles of information text containing | { } | Object | Optional |
| containerScrollStyle | Text tag container stylesl | { } | Object | Optional |
| containerButtonStyle | Options display styles | { } | Object | Optional |
| containerIconStyle | Icon Styles | { } | Object | Optional |
| onChangeSearch | Get the text or object | onChangeSearch={object => setOption(object)} | Function | Optional |
| customizeComponentInput | Used to return an input component | customizeComponentInput | Object | Optional |
| customizComponenteResult | It is used to return an output component | ({ valueResult, element }) => < CustomizComponenteResult/> | Function | Optional |
| leftIcon | This is used to customize the icon | () => < leftIcon/> | Function | Optional |
| error | you can set if have or no error | false | Boolean | Optional |
------------
When you want to customize the component you need set this customizeComponentInput object:
| Name | Description | Default | Type | Criterion |
|---------------------------|------------------------------------------|-------------|---------|-----------|
| InputCutom |It is the input component that you want to set |undefine| Array | Optional |
| addPropsInput |The properties that you want to pass to the custom component |undefine| Object | Optional |
## Warning
### Strings beginning with the following characters will not be found:
| | | Characters
|------|---------------|-------------------|
| 1 | | + |
| 2 | | : |
| 3 | | ( |
| 4 | | * |
| 5 | | ? |
| 6 | | \ |
| 7 | | [ |
| 8 | | . |
| 9 | | ^ |
| 10 | | \| |
| 11 | | ) |
------------
## How Implement
### Simpler way
```JS
setOption(object)}
buttonEnabled={true}
placeholder={'email'}
/>
```
### Complexer way
``` JS
import { Icon } from 'native-base';
```
```JS
setOption(object)}
buttonEnabled={true}
placeholder={'email'}
containerIconStyle={styles.containerIconStyle}
containerInputStyle={styles.containerInputStyle}
containerScrollStyle={styles.containerScrollStyle}
containerTextInfoStyle={styles.containerTextInfoStyle}
containerButtonStyle={styles.containerButtonStyle}
leftIcon={() => }
/>
```
## Example
[EXAMPLE CODE](./Example.md)
------------
>> [Make a donation](https://paypal.me/jsnavarroc)
------------
## Author
Johan Navarro | [https://johansolution.com](http://johansolution.com/)
------------
## License
[GNU ©](./LICENSE)
