v4.11.4

React dropdown select

Dropdown select for react

Customisable dropdown select/multi-select component for react with custom render callback props to override inner components

Install via npm:

SHELLnpm install --save react-dropdown-select

Use:

JSXimport Select from 'react-dropdown-select';

export const App = ({ options }) => (
  <Select
    multi
    options={options}
    onChange={(values) => this.onChange(values)}
  />
);

Demo

 

Multi
Disabled
Loading
Clearable
Searchable
Create new entries
Separator
Dropdown handle
Stay open
Custom content renderer
Custom dropdown renderer
Custom dropdown item renderer
Keep selected item in a list
Close dropdown on select/deselect
Close dropdown on click input
Custom color
Dropdown position
Dropdown Height:
Dropdown direction
Add placeholder:
Search by field:
Label field:
Value field:

Options:
[
  {
    "id": "8348096a-794e-4a1c-b202-ecae5c03e9a3",
    "name": "Cory Kassulke",
    "username": "Chadrick26",
    "email": "Jamaal_Buckridge@yahoo.com",
    "address": {
      "street": "Erdman Light",
      "suite": 31639,
      "city": "South Etha",
      "zipcode": "86678",
      "geo": {
        "lat": "44.8035",
        "lng": "156.3241"
      }
    },
    "phone": "(719) 396-3145",
    "website": "agitated-shampoo.org",
    "company": {
      "name": "Fisher, Gutkowski and Kautzer",
      "catchPhrase": "Pre-emptive leading edge service-desk",
      "bs": "transform back-end paradigms"
    }
  },
  {
    "id": "4ae68938-739e-44b9-97f0-e226d03cb723",
    "name": "Dylan Boehm",
    "username": "Daniela_Denesik8",
    "email": "Juvenal_Nitzsche74@hotmail.com",
    "address": {
      "street": "Trycia Tunnel",
      "suite": 6405,
      "city": "Lake Rosario",
      "zipcode": "08361-3771",
      "geo": {
        "lat": "17.7476",
        "lng": "110.1411"
      }
    },
    "phone": "(803) 255-5162 x53147",
    "website": "physical-guerrilla.com",
    "company": {
      "name": "Marks - Pollich",
      "catchPhrase": "Reverse-engineered value-added application",
      "bs": "engage world-class bandwidth"
    }
  },
  {
    "id": "24857a60-c790-4655-89b3-9d7dbab0d71c",
    "name": "Leatha Raynor",
    "username": "Cora.Wisoky",
    "email": "Wilma.Haley@yahoo.com",
    "address": {
      "street": "Ophelia Drive",
      "suite": 43281,
      "city": "Hectorville",
      "zipcode": "42690-7968",
      "geo": {
        "lat": "-11.8322",
        "lng": "-176.7414"
      }
    },
    "phone": "(397) 298-8807 x26519",
    "website": "occasional-marriage.biz",
    "company": {
      "name": "Beatty Inc",
      "catchPhrase": "Versatile mobile model",
      "bs": "evolve extensible bandwidth"
    }
  },
  {
    "id": "a1da0fe5-2835-4805-80d2-d65ef3d6f6bb",
    "name": "Deron Windler",
    "username": "Kellen_Bahringer15",
    "email": "Lysanne.Crona@yahoo.com",
    "address": {
      "street": "Pagac Key",
      "suite": 54735,
      "city": "Port America",
      "zipcode": "35623-4916",
      "geo": {
        "lat": "55.2890",
        "lng": "-59.8857"
      }
    },
    "phone": "1-583-225-4056",
    "website": "fortunate-rebel.com",
    "company": {
      "name": "Price, Cronin and Leuschke",
      "catchPhrase": "Seamless 6th generation interface",
      "bs": "seize mission-critical supply-chains"
    }
  },
  {
    "id": "6f804a03-fdc5-43a5-a0ca-56e577b9bdf9",
    "name": "Camilla Braun",
    "username": "Candida.Watsica48",
    "email": "Tyrique_Gutkowski63@hotmail.com",
    "address": {
      "street": "Joanny Plains",
      "suite": 90145,
      "city": "Bartonburgh",
      "zipcode": "90934",
      "geo": {
        "lat": "-12.0472",
        "lng": "-98.3520"
      }
    },
    "phone": "1-752-748-9849 x1366",
    "website": "faithful-public.name",
    "company": {
      "name": "Dare Group",
      "catchPhrase": "De-engineered system-worthy extranet",
      "bs": "synergize plug-and-play partnerships"
    }
  },
  {
    "id": "107f7ece-f51e-4732-a8fc-5055244873dd",
    "name": "Felicity Hintz",
    "username": "Alejandrin_Schumm37",
    "email": "Jess_Dickens@gmail.com",
    "address": {
      "street": "Angelita Summit",
      "suite": 81957,
      "city": "Kemmerchester",
      "zipcode": "45999-0349",
      "geo": {
        "lat": "-51.8571",
        "lng": "142.3784"
      }
    },
    "phone": "609.560.0393 x7271",
    "website": "gripping-minister.info",
    "company": {
      "name": "D'Amore LLC",
      "catchPhrase": "Pre-emptive multi-tasking hardware",
      "bs": "facilitate ubiquitous supply-chains"
    }
  },
  {
    "id": "bbbf53b4-7a04-4a89-8b9c-fddb91c8e65d",
    "name": "Lenora Ziemann",
    "username": "Destin.Conroy",
    "email": "Martine.White@gmail.com",
    "address": {
      "street": "Osinski Glens",
      "suite": 54863,
      "city": "Hoppefort",
      "zipcode": "18838-6099",
      "geo": {
        "lat": "-4.4862",
        "lng": "145.2884"
      }
    },
    "phone": "1-993-800-7889 x718",
    "website": "overjoyed-premium.biz",
    "company": {
      "name": "Ruecker Group",
      "catchPhrase": "Multi-channelled fault-tolerant frame",
      "bs": "optimize distributed e-services"
    }
  },
  {
    "id": "065b54d3-73f1-4401-af7d-4e83c97a14d4",
    "name": "Sydnie Roob",
    "username": "Clay.Gerhold",
    "email": "Geraldine56@yahoo.com",
    "address": {
      "street": "Rau Centers",
      "suite": 66012,
      "city": "Lake Sonnyshire",
      "zipcode": "37220",
      "geo": {
        "lat": "-27.7355",
        "lng": "143.1348"
      }
    },
    "phone": "1-479-596-7459 x42924",
    "website": "slimy-blast.biz",
    "company": {
      "name": "Frami, Price and McClure",
      "catchPhrase": "Enhanced fault-tolerant capacity",
      "bs": "disintermediate B2C mindshare"
    }
  },
  {
    "id": "f5a63b01-216a-4ad0-8ac4-a938b293c567",
    "name": "Burley Klocko",
    "username": "Patsy.OConner",
    "email": "Rene60@hotmail.com",
    "address": {
      "street": "Anastacio Track",
      "suite": 22052,
      "city": "Hillsboro",
      "zipcode": "34336",
      "geo": {
        "lat": "-28.3836",
        "lng": "-105.4913"
      }
    },
    "phone": "924.270.4731",
    "website": "authentic-twist.name",
    "company": {
      "name": "Kirlin, Gulgowski and Frami",
      "catchPhrase": "Decentralized multi-tasking open system",
      "bs": "syndicate impactful systems"
    }
  },
  {
    "id": "5509efd1-c5e1-4383-9224-6115b63dcecb",
    "name": "Esteban Treutel",
    "username": "Lilliana.Osinski",
    "email": "Ken.Rempel33@hotmail.com",
    "address": {
      "street": "Prohaska Ways",
      "suite": 16081,
      "city": "Alfonzoborough",
      "zipcode": "93537",
      "geo": {
        "lat": "72.9692",
        "lng": "11.7499"
      }
    },
    "phone": "(718) 366-7918 x9001",
    "website": "admired-effort.name",
    "company": {
      "name": "Larson - Gerlach",
      "catchPhrase": "Devolved solution-oriented Graphic Interface",
      "bs": "enable intuitive e-commerce"
    }
  },
  {
    "id": "f30167b7-5ff8-4ec4-86bd-b99bd0a2585c",
    "name": "Lonie Wehner",
    "username": "Alyce_Hudson",
    "email": "Ephraim_OConnell@hotmail.com",
    "address": {
      "street": "Witting Prairie",
      "suite": 79735,
      "city": "Lake Albinhaven",
      "zipcode": "87498",
      "geo": {
        "lat": "32.7088",
        "lng": "115.8549"
      }
    },
    "phone": "(463) 902-8324 x720",
    "website": "nippy-play.info",
    "company": {
      "name": "Stroman - Gulgowski",
      "catchPhrase": "Intuitive logistical success",
      "bs": "orchestrate scalable initiatives"
    }
  },
  {
    "id": "8b11a8fb-1911-42c7-b1b2-f3ceed13e915",
    "name": "Arvel Emard",
    "username": "Ryleigh97",
    "email": "Torrance.Frami62@yahoo.com",
    "address": {
      "street": "Stiedemann Garden",
      "suite": 56408,
      "city": "Santa Cruz",
      "zipcode": "52470",
      "geo": {
        "lat": "57.4970",
        "lng": "16.6546"
      }
    },
    "phone": "681-736-0178",
    "website": "agonizing-proposal.name",
    "company": {
      "name": "Wolff, Schiller and Feeney",
      "catchPhrase": "Innovative executive extranet",
      "bs": "synergize granular infrastructures"
    }
  },
  {
    "id": "ec7250e0-4b33-4ffc-a93c-1526b24d0e84",
    "name": "Emiliano Greenfelder",
    "username": "Leslie_Auer",
    "email": "Aurelia_Pacocha@gmail.com",
    "address": {
      "street": "Heidenreich Forks",
      "suite": 22546,
      "city": "South Whittier",
      "zipcode": "32709-4436",
      "geo": {
        "lat": "17.9214",
        "lng": "-17.7084"
      }
    },
    "phone": "370.858.8199",
    "website": "identical-zebrafish.net",
    "company": {
      "name": "Nitzsche - Hermiston",
      "catchPhrase": "Centralized foreground monitoring",
      "bs": "whiteboard viral niches"
    }
  },
  {
    "id": "7293fe3e-4edb-408c-ad83-b29a3669b272",
    "name": "Lavonne McKenzie",
    "username": "Chris.Buckridge",
    "email": "Mina.Gerhold@gmail.com",
    "address": {
      "street": "Langworth Land",
      "suite": 16012,
      "city": "Lauderhill",
      "zipcode": "31018-7678",
      "geo": {
        "lat": "33.8855",
        "lng": "-89.2969"
      }
    },
    "phone": "686.446.9558 x8207",
    "website": "threadbare-fat.biz",
    "company": {
      "name": "DuBuque and Sons",
      "catchPhrase": "Exclusive neutral open architecture",
      "bs": "aggregate robust technologies"
    }
  },
  {
    "id": "4b28187e-e555-49c3-ad53-3c8027cd7bf8",
    "name": "Laverna Kerluke",
    "username": "Webster.Schumm12",
    "email": "Graciela42@hotmail.com",
    "address": {
      "street": "Goyette Station",
      "suite": 38295,
      "city": "Highland",
      "zipcode": "13095-1332",
      "geo": {
        "lat": "26.3490",
        "lng": "-98.4992"
      }
    },
    "phone": "1-448-297-1379 x88009",
    "website": "sorrowful-coleslaw.com",
    "company": {
      "name": "Batz - McDermott",
      "catchPhrase": "Multi-layered hybrid structure",
      "bs": "whiteboard one-to-one platforms"
    }
  },
  {
    "id": "773db10b-7c00-4c75-bb4e-1b8b145c7627",
    "name": "Torrance Erdman",
    "username": "Alexa.Stracke54",
    "email": "Ervin.Wolf56@yahoo.com",
    "address": {
      "street": "Mayert Mount",
      "suite": 56862,
      "city": "South Vernice",
      "zipcode": "65527",
      "geo": {
        "lat": "7.6205",
        "lng": "123.6057"
      }
    },
    "phone": "703.543.6101 x57187",
    "website": "spanish-celery.com",
    "company": {
      "name": "Kautzer Inc",
      "catchPhrase": "Versatile upward-trending time-frame",
      "bs": "transform back-end niches"
    }
  },
  {
    "id": "3f06ab29-5e4b-49b1-a1b6-3a9c42653bf0",
    "name": "Mary Feil",
    "username": "Sherman.Considine",
    "email": "Adela94@yahoo.com",
    "address": {
      "street": "Lebsack Land",
      "suite": 73378,
      "city": "Springdale",
      "zipcode": "47018-0882",
      "geo": {
        "lat": "36.3784",
        "lng": "70.0386"
      }
    },
    "phone": "1-738-520-5207",
    "website": "thorny-wound.com",
    "company": {
      "name": "Kovacek - Fadel",
      "catchPhrase": "Digitized empowering knowledge base",
      "bs": "transform 24/365 bandwidth"
    }
  },
  {
    "id": "266af104-2585-46bb-8d51-cf74e22a0db4",
    "name": "Clarissa Larkin",
    "username": "Zachary53",
    "email": "Ned_Bins40@yahoo.com",
    "address": {
      "street": "Keeling Cape",
      "suite": 2136,
      "city": "East Mazietown",
      "zipcode": "97839-4687",
      "geo": {
        "lat": "78.5196",
        "lng": "-63.4593"
      }
    },
    "phone": "(888) 216-3321",
    "website": "slushy-snowflake.name",
    "company": {
      "name": "Boyle, Herzog and Schmitt",
      "catchPhrase": "User-centric leading edge toolset",
      "bs": "whiteboard intuitive e-commerce"
    }
  },
  {
    "id": "7c074e38-ce14-45ba-ae63-eebf1172ebb1",
    "name": "Osvaldo Hermann",
    "username": "Felipe2",
    "email": "Jennyfer_Feest60@yahoo.com",
    "address": {
      "street": "Purdy Rapid",
      "suite": 75871,
      "city": "Olathe",
      "zipcode": "51487",
      "geo": {
        "lat": "-70.5847",
        "lng": "128.9876"
      }
    },
    "phone": "775.447.2878",
    "website": "another-ficlet.org",
    "company": {
      "name": "Schmeler, McCullough and Dickens",
      "catchPhrase": "Cross-platform well-modulated project",
      "bs": "unleash best-of-breed eyeballs"
    }
  },
  {
    "id": "75c11023-1336-45f4-9f45-90a5920f6321",
    "name": "Elody Harvey",
    "username": "Ahmed.Macejkovic",
    "email": "Wilmer.Carroll96@hotmail.com",
    "address": {
      "street": "Dibbert Freeway",
      "suite": 87100,
      "city": "East Anibal",
      "zipcode": "34153-7785",
      "geo": {
        "lat": "-40.2143",
        "lng": "83.5121"
      }
    },
    "phone": "713.472.0184",
    "website": "impish-icon.org",
    "company": {
      "name": "Ledner - Dibbert",
      "catchPhrase": "Upgradable disintermediate open architecture",
      "bs": "whiteboard next-generation solutions"
    }
  },
  {
    "id": "c79153e5-8be9-4ab1-8d3d-05ddd99ae089",
    "name": "Barry Prosacco",
    "username": "Beverly97",
    "email": "Zoila57@hotmail.com",
    "address": {
      "street": "Sam Mills",
      "suite": 86214,
      "city": "North Myahaven",
      "zipcode": "08280-5439",
      "geo": {
        "lat": "-14.0211",
        "lng": "50.6619"
      }
    },
    "phone": "1-497-896-9368 x258",
    "website": "dramatic-dancing.net",
    "company": {
      "name": "Abshire - Fisher",
      "catchPhrase": "Public-key multi-state benchmark",
      "bs": "redefine back-end applications"
    }
  },
  {
    "id": "26366b43-3b7e-4b35-a6d3-5580f124b7a4",
    "name": "Sydney Boyer",
    "username": "Laurence_Kuhlman",
    "email": "Kolby.Adams@hotmail.com",
    "address": {
      "street": "Marielle Club",
      "suite": 69080,
      "city": "Lake Hiltonstad",
      "zipcode": "03334-9645",
      "geo": {
        "lat": "87.9053",
        "lng": "155.9436"
      }
    },
    "phone": "1-554-837-1341",
    "website": "rotating-anthropology.net",
    "company": {
      "name": "Wunsch - Gleichner",
      "catchPhrase": "Distributed holistic circuit",
      "bs": "brand dynamic architectures"
    }
  },
  {
    "id": "a49558fa-807a-4508-84e9-04451748c350",
    "name": "Kristofer Kemmer",
    "username": "Joanny.Kub",
    "email": "Pink_Bergnaum75@gmail.com",
    "address": {
      "street": "Streich Gardens",
      "suite": 19077,
      "city": "Willmsport",
      "zipcode": "33565",
      "geo": {
        "lat": "70.3558",
        "lng": "-150.0032"
      }
    },
    "phone": "1-358-386-2805",
    "website": "french-crinoline.biz",
    "company": {
      "name": "Bahringer, Cremin and Robel",
      "catchPhrase": "Programmable composite emulation",
      "bs": "productize mission-critical methodologies"
    }
  },
  {
    "id": "f1cd3a78-72db-4c45-b018-184bcb632737",
    "name": "Rahul Pagac",
    "username": "Winona0",
    "email": "Heidi.Jacobson36@hotmail.com",
    "address": {
      "street": "Lempi Valleys",
      "suite": 61104,
      "city": "New Delpha",
      "zipcode": "13874-4908",
      "geo": {
        "lat": "59.9903",
        "lng": "164.9957"
      }
    },
    "phone": "(699) 377-0401 x26450",
    "website": "wee-canteen.biz",
    "company": {
      "name": "McLaughlin Inc",
      "catchPhrase": "Persistent 3rd generation system engine",
      "bs": "architect vertical infrastructures"
    }
  },
  {
    "id": "cd5f7599-66b7-4573-b333-17712f3aa9f8",
    "name": "Lukas Dietrich",
    "username": "Zita.White30",
    "email": "Don_Hodkiewicz43@yahoo.com",
    "address": {
      "street": "Emmet Point",
      "suite": 95038,
      "city": "Legroschester",
      "zipcode": "56182-8020",
      "geo": {
        "lat": "-17.8731",
        "lng": "-65.0976"
      }
    },
    "phone": "1-921-220-9357 x4952",
    "website": "sharp-passion.net",
    "company": {
      "name": "Nader and Sons",
      "catchPhrase": "Exclusive executive Graphic Interface",
      "bs": "brand user-centric supply-chains"
    }
  },
  {
    "id": "a22c1bea-b908-4782-995e-a4be21233935",
    "name": "Fae Pacocha",
    "username": "Ashlee71",
    "email": "Sammie.Glover@hotmail.com",
    "address": {
      "street": "Deckow Oval",
      "suite": 88496,
      "city": "Audreymouth",
      "zipcode": "03297-7443",
      "geo": {
        "lat": "12.0030",
        "lng": "62.3395"
      }
    },
    "phone": "1-950-882-0850 x5286",
    "website": "sunny-portion.info",
    "company": {
      "name": "Paucek - Reichert",
      "catchPhrase": "Right-sized clear-thinking moderator",
      "bs": "whiteboard customized models"
    }
  },
  {
    "id": "5d85e23d-45a8-489c-b4fc-694dfabdf51e",
    "name": "Josh Davis",
    "username": "Jeromy_Hintz93",
    "email": "Jennie61@yahoo.com",
    "address": {
      "street": "White Underpass",
      "suite": 21323,
      "city": "Port Adrianborough",
      "zipcode": "46206",
      "geo": {
        "lat": "-34.1640",
        "lng": "137.3985"
      }
    },
    "phone": "476.365.9935 x9401",
    "website": "austere-clan.name",
    "company": {
      "name": "Runte - Langosh",
      "catchPhrase": "Decentralized dedicated encryption",
      "bs": "unleash killer channels"
    }
  },
  {
    "id": "6cbc4353-0866-41e3-8eff-c1dcde40ad35",
    "name": "Unique Cummerata",
    "username": "Cecelia.Becker23",
    "email": "Beth.Fadel@gmail.com",
    "address": {
      "street": "Kiehn Keys",
      "suite": 5756,
      "city": "San Marcos",
      "zipcode": "98178",
      "geo": {
        "lat": "58.6177",
        "lng": "-63.2396"
      }
    },
    "phone": "1-381-485-7613",
    "website": "immense-synonym.net",
    "company": {
      "name": "Lang, Fay and Witting",
      "catchPhrase": "Expanded asynchronous structure",
      "bs": "grow viral action-items"
    }
  },
  {
    "id": "f4463682-6149-4852-898b-146eaa4b177d",
    "name": "Kennedy Leannon",
    "username": "Simeon_Kris83",
    "email": "Fiona55@gmail.com",
    "address": {
      "street": "Kirlin Oval",
      "suite": 15630,
      "city": "Broomfield",
      "zipcode": "82330",
      "geo": {
        "lat": "87.2713",
        "lng": "-38.1477"
      }
    },
    "phone": "1-522-280-2857",
    "website": "plaintive-playroom.name",
    "company": {
      "name": "Boyle - Harber",
      "catchPhrase": "Seamless directional open architecture",
      "bs": "e-enable mission-critical e-business"
    }
  },
  {
    "id": "d939eb53-ae69-459e-9b31-90cd23ccc754",
    "name": "Nathaniel Price",
    "username": "Wilfred_Effertz",
    "email": "Antoinette6@hotmail.com",
    "address": {
      "street": "Koelpin Turnpike",
      "suite": 46387,
      "city": "Torphyport",
      "zipcode": "15217-4587",
      "geo": {
        "lat": "-26.1598",
        "lng": "19.1894"
      }
    },
    "phone": "(454) 394-5279 x49716",
    "website": "joyous-maternity.com",
    "company": {
      "name": "Erdman, Towne and Renner",
      "catchPhrase": "Diverse zero administration forecast",
      "bs": "recontextualize sticky infrastructures"
    }
  }
]
Selected values:
[
  {
    "id": "a1da0fe5-2835-4805-80d2-d65ef3d6f6bb",
    "name": "Deron Windler",
    "username": "Kellen_Bahringer15",
    "email": "Lysanne.Crona@yahoo.com",
    "address": {
      "street": "Pagac Key",
      "suite": 54735,
      "city": "Port America",
      "zipcode": "35623-4916",
      "geo": {
        "lat": "55.2890",
        "lng": "-59.8857"
      }
    },
    "phone": "1-583-225-4056",
    "website": "fortunate-rebel.com",
    "company": {
      "name": "Price, Cronin and Leuschke",
      "catchPhrase": "Seamless 6th generation interface",
      "bs": "seize mission-critical supply-chains"
    }
  }
]