Deployed version - https://mist-dropdown.netlify.app/

Dropdown Component source

Usage example

    import React, { useState } from  'react';
    import ReactDOM from  'react-dom';
    import AsyncDataChooser from './components/dropdowns/AsyncDataChooser/AsyncDataChooser';
    
    const App = () => {
     const [label, setLabel] = useState('Select user');
        <AsyncDataChooser
        getAsyncData={() => Promise.resolve([{ name: 'Manu', code: '1222' }, { name: 'Ram', code: '1324' }])}
        keyExtractor={item => item.code}
        itemRender={item =>  item.name}
        label={label}
        onSelect={item => setLabel(`${item.code}`)}
        filterFn={(item, filterValue) => item['name'].search(filterValue) > -1}
        loaderRenderFn={() =>  <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif"  />}
        
        />
      }
ReactDOM.render(<App/>,document.getElementById('root'));

Component Props

attribute	type	required	default value	description
getAsyncData	function	yes		should be an async function to fetch data
itemRender	function	yes		to render the dropdown list item
keyExtractor	function	yes		function for supply key to list items
label	string	optional	Choose	Button label
style	object	optional	undefined	inline styles to the container of dropdown
onChange	function	optional	undefined	return selected object on this callback
className	string	optional	undefined	class attribute to the container of dropdown
filterFn	function	optional	undefined	listitem, filterValue entered will be args and should return a boolean value
loaderRenderFn	function	optional	Loading..	Component shown while loading async data

About performance

Dropdown is tested with 50000 records (2.98 Mb json). Netlify is not allowing bigger files as it is taking more time to build. The file 'words.js' is removed because of that. But in version 0.5 (tag/0.5) this can be run locally and tested. This file is loaded on demand and not hardcoded in component.

About the project

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.

You will also see any lint errors in the console.

yarn test

Few unit tests are added with jest and enzyme

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.