Materil Design Select Box Enhancement Component – React MD select

Category: Form , React
Author:boussadjra
Views Total:5 views
Official Page:Go to website
Publish Date:August 6, 2020
License:MIT

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;

Preview:

Materil Design Select Box Enhancement Component - React MD select

You Might Be Interested In:

Leave a Reply