https://github.com/gragland/instatype

⚡️ Mobile-friendly React autocomplete component
https://github.com/gragland/instatype

autocomplete component react search typeahead

Last synced: 25 days ago
JSON representation

⚡️ Mobile-friendly React autocomplete component

• Host: GitHub
• URL: https://github.com/gragland/instatype
• Owner: gragland
• License: mit
• Created: 2015-03-22T06:01:21.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2020-07-24T07:22:34.000Z (over 4 years ago)
• Last Synced: 2024-09-19T01:53:23.652Z (3 months ago)
• Topics: autocomplete, component, react, search, typeahead
• Language: JavaScript
• Homepage:
• Size: 1.78 MB
• Stars: 48
• Watchers: 4
• Forks: 7
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-cn - instatype by @gragland - Simple react autocomplete component (Uncategorized / Uncategorized)
• awesome-react - instatype by @gragland - Simple react autocomplete component
• awesome-learning-resources - instatype by @gragland - Simple react autocomplete component (Uncategorized / Uncategorized)
• awesome-react - instatype by @gragland - Mobile-friendly React autocomplete component ` 📝 4 years ago` (React [🔝](#readme))

README

        
# instatype

A mobile-friendly React autocomplete component

## Demo

unsplash.now.sh ([source](https://github.com/gragland/unsplash-demo))

## Install

`npm install instatype --save`

## Contribute

`npm run example` to run the example app with hot loading of instatype source for easy development.

## Usage

```jsx

import React from 'react';

import Instatype from 'instatype';

class Component extends React.Component {

  render() {

    return ;

  }

}

```

## Props

Prop                       |    Description

---------------------------|----------------

`placeholder`              | Placeholder text for input

`limit`                    | Number of results to show in dropdown

`thumbStyle`               | Set result images to "circle" or "square"

`loadingIcon`              | Path to custom loading icon

`requestHandler`           | Required function that fetches data, adds "image" and "name" properties to each object in the response array, and then passes data back to the instatype component. See an example requestHandler function below.

`selectedHandler`              | Required function that is called when a dropdown result is clicked. This will be passed the full object initially used to populate that result in the dropdown.

## Example requestHandler

```js

requestHandlerUsers: function(query, limit, callback){

  $.ajax({

    url: "https://api.instagram.com/v1/users/search",

    dataType: "jsonp",

    data: {

      client_id: this.props.instagramClientId,

      q: query,

      count: limit

    },

    success: function(data) {

      // Instatype expects an "image" and "name" for each result

      var renamedData = data.data.map(function(result){

        result.image = result.profile_picture;

        result.name = result.username;

        return result;

      });

      

      callback(renamedData);

    }

  });

}

```