Materil Design Select Box Enhancement Component - React MD select

Description:

A React select component that allows you to select item(s) from a set of items that could be custom rendered or loaded asynchronously, it tries to respect the Material Design specifications.

Install & Import:

# NPM
$ npm i react-md-select --save

import React from 'react';
import MDSelect from 'react-md-select';
import { useState } from 'react';
import './app.scss';

Basic usage:

const countries = [
  {
    name: 'Afghanistan',
    capital: 'Kabul',
    population: 27657145,
    flag: 'https://restcountries.eu/data/afg.svg',
  },
  {
    name: 'Åland Islands',
    capital: 'Mariehamn',
    population: 28875,
    flag: 'https://restcountries.eu/data/ala.svg',
  },
  {
    name: 'Albania',
    capital: 'Tirana',
    population: 2886026,
    flag: 'https://restcountries.eu/data/alb.svg',
  },
  {
    name: 'Algeria',
    capital: 'Algiers',
    population: 40400000,
    flag: 'https://restcountries.eu/data/dza.svg',
  },
];
const config = {
  itemLabel: 'name',
  itemKey: 'name',
};
const App = () => {
  const [country, setCountry] = useState(null);
  const handleChange = val => {
    setCountry(val);
  };
  return (
    <div className="app-demo">
      <div className="app-demo__item">
        <MDSelect
          options={countries}
          label="Standard"
          value={country}
          onChange={handleChange}
          config={config}
        />
      </div>
    </div>
  );
};
export default App;