npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@devsquads/react-native-autocomplete-search

v1.0.2

Published

react-native component used for autocompletion when searching data from local or remote source

Downloads

15

Readme

Intro / Preview

Component to search suggestion during you write a word. Based on a static data list or remote data. You can search suggestion in static data or fetching data suggestion from an api doing the work when you send the word you write. If suggestion is selected, an object ({ id: XX, name: XX }) is sent back to the parent component. The same occurs by simply write data corresponding to one suggestion. The component is usable with static data or data stored remotly like an elastic index using suggest feature (ex: https://www.elastic.co/guide/en/elasticsearch/reference/current/search-suggesters-completion.html).

Installation

Install package via npm:

  npm install react-native-autocomplete-search

or

Install package via npm:

yarn add react-native-autocomplete-search

Props details of InputAutosuggest

inputStyle: style object to change the style of the InputText used // Optional

flatListStyle: style object to change the style of the FlatList used // Optional

itemTextStyle: style object to change the style of the text suggestion, // Optional

itemTagStyle: style object to change the style of the tag suggestion, // Optional

apiEndpointSuggestData: function to access suggest feature to remote data (elatic index for example), // omit if using staticData

staticData: Array containing static data used to search suggestion instead of using apiEndpointSuggestData // omit if using apiEndpointSuggestData

onDataSelectedChange: function to handle selected data in parent component

keyPathRequestResult: path as string. It is used in the case of fetching data like elastic for example, array suggestion can be in a specific path of the object. // can be omit if your data object is an array

itemFormat: object to containing path string for 'id' and 'name' in the data array. 'tags' is an array of string and is optional. // Optional if you data array contains id and name property in each object

Usage

Include the library in your code

import { InputAutoSuggest } from 'react-native-autocomplete-search';

Simple usage with static data

<InputAutoSuggest
  style={{ flex: 1 }}
  staticData={[
    {id:'1', name:'Paris'},
    {id:'2', name: 'Pattanduru'},
    {id:'3', name: 'Para'},
    {id:'4', name:'London'},
    {id:'5', name:'New York'},
    {id:'6', name:'Berlin'}]}
/>

Complex usage with static data

<InputAutoSuggest
  style={{ flex: 1 }}
  staticData={[
    {someAttribute: 'val1', details: { id: '1', name:'Paris', country:'FR', continent:'Europe'}},
    {someAttribute: 'val2', details: { id: '2', name: 'Pattanduru', country:'PA', continent:'South America'}},
    {someAttribute: 'val3', details: { id: '3', name: 'Para', country:'PA', continent: 'South America'}},
    {someAttribute: 'val4', details: { id: '4', name:'London', country:'UK', continent: 'Europe'}},
    {someAttribute: 'val5', details: { id: '5', name:'New York', country: 'US', continent: 'North America'}},
    {someAttribute: 'val6', details: { id: '6', name:'Berlin', country: 'DE', continent: 'Europe'}},
   ]}
  itemFormat={{id: 'details.id', name: 'details.name', tags:['details.continent', 'details.country']}}
/>

itemFormat is used to give the path to the id, name and tags giving:

Simple usage with remote data fetching

You can use the component to send the text you write and ask an api to make the suggestions. Just give your method calling the api to apiEndpointSuggestData prop instead of staticData.

<InputAutoSuggest
  style={{ flex: 1 }}
  apiEndpointSuggestData={text => YOUR-METHOD-CALLING-API(text)}
  itemFormat={{id: 'details.id', name: 'details.name', tags:['details.continent', 'details.country']}}
/>

Get back the data selected to the parent component

You can get back data information about the research by using the prop function 'onDataSelectedChange': on object is passed as { id: XX, name: XX } or as null if there is not corresponding research information about the test.

<InputAutoSuggest
  style={{ flex: 1 }}
  apiEndpointSuggestData={text => YOUR-METHOD-CALLING-API(text)}
  itemFormat={{id: 'details.id', name: 'details.name', tags:['details.continent', 'details.country']}}
  onDataSelectedChange={data => console.log(data)}
/>