Customisable dropdown select/multi-select component for react with custom render callback props to override inner components
SHELLnpm install --save react-dropdown-selectJSXimport Select from 'react-dropdown-select';
export const App = ({ options }) => (
<Select
multi
options={options}
onChange={(values) => this.onChange(values)}
/>
);
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:
[
{
"id": "4ca259ad-eb9a-4c4e-b954-55687d01f37f",
"name": "Willis Willms",
"username": "Reymundo_Pouros",
"email": "Annie94@hotmail.com",
"address": {
"street": "Amara Club",
"suite": 15366,
"city": "East Quincy",
"zipcode": "99467-4150",
"geo": {
"lat": "78.4240",
"lng": "-80.4337"
}
},
"phone": "1-387-275-1983 x77485",
"website": "gleaming-arrogance.biz",
"company": {
"name": "Macejkovic, Langworth and Reilly",
"catchPhrase": "Extended 3rd generation extranet",
"bs": "optimize interactive ROI"
}
},
{
"id": "b4fee926-fb60-4bd1-822e-0be5c833b84e",
"name": "Jessy Jaskolski",
"username": "Josefa_Lueilwitz24",
"email": "Zander.Hane40@gmail.com",
"address": {
"street": "Maia Throughway",
"suite": 68124,
"city": "Bergstromton",
"zipcode": "37034",
"geo": {
"lat": "59.7767",
"lng": "38.5232"
}
},
"phone": "(813) 791-3931",
"website": "unused-substance.name",
"company": {
"name": "Farrell, Gulgowski and Kerluke",
"catchPhrase": "Up-sized methodical artificial intelligence",
"bs": "redefine 24/365 e-tailers"
}
},
{
"id": "12fb1f6a-2179-4ca5-b853-fde364a7e829",
"name": "Fay Franecki",
"username": "Kyler18",
"email": "Keven65@gmail.com",
"address": {
"street": "Brycen Knolls",
"suite": 13264,
"city": "Caspertown",
"zipcode": "03880-7095",
"geo": {
"lat": "-60.5086",
"lng": "98.5766"
}
},
"phone": "(542) 294-3866",
"website": "capital-sport.biz",
"company": {
"name": "Rempel, Pouros and Donnelly",
"catchPhrase": "Future-proofed neutral architecture",
"bs": "leverage ubiquitous interfaces"
}
},
{
"id": "8b308791-1d43-4ee3-b647-ea7a48a820f8",
"name": "Lavonne Johns",
"username": "Amos74",
"email": "Louie.Corwin69@yahoo.com",
"address": {
"street": "Wisoky Lock",
"suite": 67258,
"city": "Belltown",
"zipcode": "90262",
"geo": {
"lat": "18.6545",
"lng": "-155.9854"
}
},
"phone": "(251) 258-8941 x72985",
"website": "irritating-laughter.info",
"company": {
"name": "Green, Emmerich and Nicolas",
"catchPhrase": "Organized methodical superstructure",
"bs": "morph cross-platform interfaces"
}
},
{
"id": "ae6d187c-3496-48c9-bf7b-5ea15f1671fa",
"name": "Olen Romaguera",
"username": "Sylvan.Kling",
"email": "Greta_Brekke@yahoo.com",
"address": {
"street": "Cathy Mount",
"suite": 87320,
"city": "Mobile",
"zipcode": "33138-7835",
"geo": {
"lat": "-11.3276",
"lng": "-179.2191"
}
},
"phone": "(925) 534-6707 x7020",
"website": "slow-campus.biz",
"company": {
"name": "Mills - Kovacek",
"catchPhrase": "Public-key tangible time-frame",
"bs": "maximize transparent technologies"
}
},
{
"id": "bb4f9fa2-9777-4a25-b1cf-6555e69520ef",
"name": "Jarrett Franey",
"username": "Nolan24",
"email": "Clifton.Marvin78@yahoo.com",
"address": {
"street": "Maximilian Brooks",
"suite": 51589,
"city": "Kohlerhaven",
"zipcode": "12597",
"geo": {
"lat": "59.6738",
"lng": "-127.4144"
}
},
"phone": "(939) 567-7428",
"website": "vigilant-venue.info",
"company": {
"name": "Ward, Batz and Gleichner",
"catchPhrase": "Face to face client-server parallelism",
"bs": "facilitate efficient eyeballs"
}
},
{
"id": "ebd94c50-62e5-48f6-8bb4-d0ae1f5e985b",
"name": "Antonio Zemlak",
"username": "Robyn.Jast50",
"email": "Danial_Hermann19@gmail.com",
"address": {
"street": "Rath Dale",
"suite": 59198,
"city": "Minaton",
"zipcode": "03296",
"geo": {
"lat": "-74.8643",
"lng": "-110.1062"
}
},
"phone": "709.577.3150 x512",
"website": "athletic-celsius.org",
"company": {
"name": "Wunsch Inc",
"catchPhrase": "Ameliorated needs-based concept",
"bs": "syndicate ubiquitous models"
}
},
{
"id": "5896ac2d-2586-4e79-8d00-2eba6f5015e5",
"name": "Kelton Heaney",
"username": "Michael.Cruickshank",
"email": "Coty_Weimann@yahoo.com",
"address": {
"street": "Lebsack Center",
"suite": 94725,
"city": "Leannonton",
"zipcode": "72370",
"geo": {
"lat": "-66.0253",
"lng": "-89.6860"
}
},
"phone": "1-579-544-8831",
"website": "dark-accounting.com",
"company": {
"name": "Hauck Group",
"catchPhrase": "Face to face radical conglomeration",
"bs": "strategize extensible applications"
}
},
{
"id": "3fb737cc-7bcd-4241-8db4-17e335070078",
"name": "Kelley Bahringer",
"username": "Kole85",
"email": "Kevin.Wisozk63@yahoo.com",
"address": {
"street": "Marley Streets",
"suite": 43092,
"city": "New Miracle",
"zipcode": "44499",
"geo": {
"lat": "80.9706",
"lng": "-112.7756"
}
},
"phone": "1-715-669-8504 x96901",
"website": "tremendous-singing.info",
"company": {
"name": "Murazik LLC",
"catchPhrase": "Cloned 24 hour instruction set",
"bs": "morph value-added paradigms"
}
},
{
"id": "4ab32a93-3e98-428b-8a37-b270d2a74b92",
"name": "Owen Hermann",
"username": "Preston.Balistreri",
"email": "Nathaniel_Barton69@yahoo.com",
"address": {
"street": "Tad Street",
"suite": 86546,
"city": "Mitchellberg",
"zipcode": "26637-2799",
"geo": {
"lat": "14.0510",
"lng": "49.8472"
}
},
"phone": "516-953-8505",
"website": "grubby-anklet.name",
"company": {
"name": "Yost - Carroll",
"catchPhrase": "Optimized full-range access",
"bs": "harness enterprise interfaces"
}
},
{
"id": "91a9b455-d6fa-4542-8208-3c3209cdff1a",
"name": "Jennyfer Wiegand",
"username": "Janessa77",
"email": "Alexandre.Kertzmann@gmail.com",
"address": {
"street": "Weimann Neck",
"suite": 74014,
"city": "Konopelskihaven",
"zipcode": "98370-7179",
"geo": {
"lat": "-78.2027",
"lng": "36.7655"
}
},
"phone": "431.505.9797 x81590",
"website": "our-preserves.net",
"company": {
"name": "Monahan, Padberg and Breitenberg",
"catchPhrase": "Cross-platform zero tolerance monitoring",
"bs": "harness end-to-end infrastructures"
}
},
{
"id": "e6d79b5f-91f2-4d17-9889-95066b948eb3",
"name": "Shawna Senger",
"username": "Brian_Funk17",
"email": "June71@hotmail.com",
"address": {
"street": "Weber Crescent",
"suite": 12605,
"city": "West Sophie",
"zipcode": "18546-2591",
"geo": {
"lat": "-60.9746",
"lng": "-156.9401"
}
},
"phone": "701-880-6851",
"website": "live-ethyl.name",
"company": {
"name": "Farrell - Ernser",
"catchPhrase": "Devolved bottom-line capacity",
"bs": "generate world-class e-services"
}
},
{
"id": "524eacaa-e083-4c4e-b317-0a777b107c83",
"name": "Walton Mann",
"username": "Abe49",
"email": "Celestine_Zieme@gmail.com",
"address": {
"street": "Peyton Turnpike",
"suite": 37483,
"city": "North Cadeshire",
"zipcode": "02104-6012",
"geo": {
"lat": "-74.5307",
"lng": "-50.4410"
}
},
"phone": "1-787-291-1618 x80844",
"website": "scented-doctorate.org",
"company": {
"name": "O'Kon - Robel",
"catchPhrase": "Public-key grid-enabled migration",
"bs": "transform impactful architectures"
}
},
{
"id": "3809469a-9886-4094-934e-644d89d16ceb",
"name": "Alicia Hyatt",
"username": "Filomena_Corkery",
"email": "Kacie.Senger@hotmail.com",
"address": {
"street": "Anderson Pike",
"suite": 44036,
"city": "Augusta-Richmond County",
"zipcode": "95294-0736",
"geo": {
"lat": "59.3490",
"lng": "-44.4172"
}
},
"phone": "1-326-416-9494 x3505",
"website": "monthly-anorak.com",
"company": {
"name": "Schulist, Runolfsdottir and Hahn",
"catchPhrase": "Exclusive well-modulated knowledge base",
"bs": "deploy viral niches"
}
},
{
"id": "9559b88b-8717-4c87-9327-af7bde964e03",
"name": "Alexis Rutherford",
"username": "Grady.Cremin52",
"email": "Hank13@yahoo.com",
"address": {
"street": "Bins Alley",
"suite": 7491,
"city": "Hoppechester",
"zipcode": "81944-5555",
"geo": {
"lat": "-20.0023",
"lng": "-119.3927"
}
},
"phone": "770.832.9199 x2593",
"website": "good-watermelon.org",
"company": {
"name": "Carroll, Prosacco and Gaylord",
"catchPhrase": "Future-proofed client-driven model",
"bs": "whiteboard innovative e-services"
}
},
{
"id": "65b3a870-f2d1-47b1-8618-6e6b8179d116",
"name": "Lamont Buckridge",
"username": "Joy.Lesch",
"email": "Lula.Thiel@yahoo.com",
"address": {
"street": "Owen Ville",
"suite": 82697,
"city": "Southfield",
"zipcode": "38070-7744",
"geo": {
"lat": "-31.9043",
"lng": "-138.7211"
}
},
"phone": "361-983-9862 x878",
"website": "cloudy-swanling.info",
"company": {
"name": "Sauer and Sons",
"catchPhrase": "Monitored local knowledge base",
"bs": "disintermediate virtual markets"
}
},
{
"id": "6494fb08-3459-46f8-a121-45fa2d9b7290",
"name": "Mary Bergnaum",
"username": "Tyler98",
"email": "Jerome54@gmail.com",
"address": {
"street": "Hubert Hill",
"suite": 17919,
"city": "Melbourne",
"zipcode": "17579",
"geo": {
"lat": "32.2355",
"lng": "72.8845"
}
},
"phone": "204-244-4116",
"website": "periodic-ad.name",
"company": {
"name": "Windler Inc",
"catchPhrase": "Optional neutral knowledge base",
"bs": "orchestrate bricks-and-clicks markets"
}
},
{
"id": "c430d503-7d8d-4c56-8c69-d6655cb2bd2a",
"name": "Jayden Jacobi",
"username": "Eldridge_Willms32",
"email": "Griffin34@yahoo.com",
"address": {
"street": "Dach Harbor",
"suite": 96769,
"city": "West Jerodton",
"zipcode": "60586",
"geo": {
"lat": "24.5082",
"lng": "86.0457"
}
},
"phone": "652.747.5711 x187",
"website": "dearest-complement.net",
"company": {
"name": "Botsford, Mayer and Beier",
"catchPhrase": "Diverse non-volatile frame",
"bs": "streamline bleeding-edge methodologies"
}
},
{
"id": "62c2e567-2b58-4bc9-9cd3-ef492cafeffe",
"name": "Lonie Wiegand",
"username": "Gregoria_Schiller",
"email": "Kenyatta.Morar@gmail.com",
"address": {
"street": "Hamill Parks",
"suite": 42507,
"city": "Everett",
"zipcode": "08795",
"geo": {
"lat": "-11.8393",
"lng": "-140.9134"
}
},
"phone": "619-255-8600 x19374",
"website": "trifling-exam.org",
"company": {
"name": "Collier Inc",
"catchPhrase": "Virtual contextually-based project",
"bs": "monetize next-generation platforms"
}
},
{
"id": "f741b276-24b5-42de-8f12-d683f74dfebb",
"name": "Holden Lesch",
"username": "Durward_Abbott",
"email": "Durward.Zulauf38@hotmail.com",
"address": {
"street": "Swaniawski Stravenue",
"suite": 67052,
"city": "Nitzschefort",
"zipcode": "91978-5045",
"geo": {
"lat": "62.9050",
"lng": "2.8181"
}
},
"phone": "(896) 496-0368",
"website": "verifiable-middleman.org",
"company": {
"name": "Carroll Inc",
"catchPhrase": "Synchronised homogeneous implementation",
"bs": "orchestrate dynamic action-items"
}
},
{
"id": "5948c269-8d94-4576-95cd-39569367545f",
"name": "Stefan Rolfson",
"username": "Gennaro24",
"email": "Chadd46@hotmail.com",
"address": {
"street": "Hettinger Squares",
"suite": 65159,
"city": "Croninview",
"zipcode": "19792",
"geo": {
"lat": "-11.6238",
"lng": "-131.9994"
}
},
"phone": "(668) 775-3931",
"website": "lone-gaiters.org",
"company": {
"name": "Dickinson, Hartmann and Prosacco",
"catchPhrase": "Front-line neutral time-frame",
"bs": "utilize proactive ROI"
}
},
{
"id": "5317f986-9c8f-4362-ad3e-375951e88fe9",
"name": "Lyda Koelpin",
"username": "Grayson23",
"email": "Giuseppe_Johnson6@gmail.com",
"address": {
"street": "Raymundo Estates",
"suite": 31292,
"city": "Huntsville",
"zipcode": "41044-9202",
"geo": {
"lat": "-24.5351",
"lng": "-135.2183"
}
},
"phone": "1-660-485-7719",
"website": "useful-cast.biz",
"company": {
"name": "Yost, Medhurst and Bogisich",
"catchPhrase": "Self-enabling web-enabled forecast",
"bs": "cultivate sexy channels"
}
},
{
"id": "bd7d198f-b936-4157-a550-b7a1c4e171b3",
"name": "Wendy Pfeffer",
"username": "Blake.Smith",
"email": "Vella.Casper@gmail.com",
"address": {
"street": "Caroline Run",
"suite": 44647,
"city": "Blockberg",
"zipcode": "98053",
"geo": {
"lat": "51.9588",
"lng": "109.3985"
}
},
"phone": "514-399-3979 x938",
"website": "weekly-duster.org",
"company": {
"name": "Armstrong LLC",
"catchPhrase": "Organized clear-thinking portal",
"bs": "mesh scalable networks"
}
},
{
"id": "d9b8d28a-bc1c-4844-a76e-ba0fff95b4d8",
"name": "Lonnie Wolff",
"username": "Rebecca_Moen58",
"email": "Santina.Davis@yahoo.com",
"address": {
"street": "Clifton Turnpike",
"suite": 98232,
"city": "South Gersonshire",
"zipcode": "70925-4285",
"geo": {
"lat": "-2.6809",
"lng": "-64.2885"
}
},
"phone": "418-994-3697 x8663",
"website": "athletic-mass.biz",
"company": {
"name": "Frami - Hilpert",
"catchPhrase": "Monitored stable intranet",
"bs": "facilitate distributed applications"
}
},
{
"id": "8c3a4aef-cb3e-4b0b-a23d-a3422652e84a",
"name": "Carmelo Lesch",
"username": "Yasmin_Walsh54",
"email": "Darius_Schamberger22@hotmail.com",
"address": {
"street": "Emory Trafficway",
"suite": 33445,
"city": "East Angelica",
"zipcode": "58708-9597",
"geo": {
"lat": "31.3558",
"lng": "-101.0620"
}
},
"phone": "(226) 947-6727 x398",
"website": "sparse-escort.name",
"company": {
"name": "Price - Hammes",
"catchPhrase": "Managed zero defect time-frame",
"bs": "reintermediate 24/7 convergence"
}
},
{
"id": "c65bfbf0-1f6c-42b6-94c7-d4d180f0c231",
"name": "Adelbert Larson",
"username": "Kiana81",
"email": "Dangelo93@gmail.com",
"address": {
"street": "Runolfsdottir Gardens",
"suite": 8365,
"city": "Oro Valley",
"zipcode": "99620-4047",
"geo": {
"lat": "55.2383",
"lng": "153.3587"
}
},
"phone": "881-496-4910 x8806",
"website": "loud-councilor.org",
"company": {
"name": "Schaden - Funk",
"catchPhrase": "Streamlined reciprocal knowledge base",
"bs": "empower collaborative ROI"
}
},
{
"id": "8d73f42b-b72a-4525-b27c-8de086ed1257",
"name": "Elbert Connelly",
"username": "Nichole70",
"email": "Amari91@yahoo.com",
"address": {
"street": "Collier Avenue",
"suite": 73771,
"city": "Gastonia",
"zipcode": "06768",
"geo": {
"lat": "-54.8119",
"lng": "-167.8653"
}
},
"phone": "835-722-6908 x539",
"website": "excellent-hurricane.net",
"company": {
"name": "Reilly, Keebler and Schuppe",
"catchPhrase": "Multi-layered explicit methodology",
"bs": "productize customized e-business"
}
},
{
"id": "069bc4b5-8595-4357-806d-b36745f38a5d",
"name": "Marcos Stanton",
"username": "Era.Fritsch41",
"email": "Patience_Dietrich84@hotmail.com",
"address": {
"street": "Sabrina Union",
"suite": 24898,
"city": "West Jo",
"zipcode": "20543-1105",
"geo": {
"lat": "-18.5612",
"lng": "63.5499"
}
},
"phone": "781-510-5652",
"website": "austere-sponsor.org",
"company": {
"name": "Windler LLC",
"catchPhrase": "Organic homogeneous array",
"bs": "redefine best-of-breed architectures"
}
},
{
"id": "5aa42f2c-698d-41ef-8ec6-b21fa3e696b4",
"name": "Adriana Purdy",
"username": "Ashlynn77",
"email": "Jonathan_Luettgen72@hotmail.com",
"address": {
"street": "Tillman Ford",
"suite": 54567,
"city": "Pasadena",
"zipcode": "82987-6939",
"geo": {
"lat": "56.2371",
"lng": "42.3895"
}
},
"phone": "494.337.7855 x5593",
"website": "naive-grab-bag.com",
"company": {
"name": "Grant and Sons",
"catchPhrase": "Front-line mission-critical application",
"bs": "whiteboard viral e-tailers"
}
},
{
"id": "458000ec-9c5c-48b0-9708-5d4950236f8e",
"name": "Alison Douglas",
"username": "Christine_Barton",
"email": "Westley.Yost@yahoo.com",
"address": {
"street": "Elisa Lodge",
"suite": 55812,
"city": "East Loycehaven",
"zipcode": "22910-5741",
"geo": {
"lat": "-53.4246",
"lng": "91.9907"
}
},
"phone": "938-407-1242 x7804",
"website": "frizzy-surprise.info",
"company": {
"name": "Zulauf, Gibson and Carter",
"catchPhrase": "Exclusive value-added core",
"bs": "transition leading-edge eyeballs"
}
}
][
{
"id": "8b308791-1d43-4ee3-b647-ea7a48a820f8",
"name": "Lavonne Johns",
"username": "Amos74",
"email": "Louie.Corwin69@yahoo.com",
"address": {
"street": "Wisoky Lock",
"suite": 67258,
"city": "Belltown",
"zipcode": "90262",
"geo": {
"lat": "18.6545",
"lng": "-155.9854"
}
},
"phone": "(251) 258-8941 x72985",
"website": "irritating-laughter.info",
"company": {
"name": "Green, Emmerich and Nicolas",
"catchPhrase": "Organized methodical superstructure",
"bs": "morph cross-platform interfaces"
}
}
]