Simple Dropdown Component for React

Simple Dropdown Component for React

Simple Dropdown Component for React. React dropdown component NOW

react-dropdown-now

The demo page is here. react-dropdown-now is a fork of react-dropdown.

requires React >= 16.8

import { Dropdown, Selection } from 'react-dropdown-now';
import 'react-dropdown-now/style.css';

// normal usage
<Dropdown
  placeholder="Select an option"
  className="my-className"
  options={['one', 'two', 'three']}
  value="one"
  onChange={(value) => console.log('change!', value)}
  onSelect={(value) => console.log('selected!', value)} // always fires once a selection happens even if there is no change
  onClose={(closedBySelection) => console.log('closedBySelection?:', closedBySelection)}
  onOpen={() => console.log('open!')}
/>;

// use the Selection component with other components like popovers etc.
<Selection
  options={['one', 'two', 'three']}
  value="one"
  onChange={(value) => console.log('change!', value)}
/>;

Flat Array options

const options = [
  'one', 'two', 'three'
];

Object Array options

const options = [
  { id: 'one', value: 'one', label: 'One', view: <span>One</span> },
  { value: 'two', label: 'Two', className: 'myOptionClassName' },
  {
   name: 'group1',
   items: [
     { value: 'three', label: 'Three', className: 'myOptionClassName' },
     { value: 'four', label: 'Four' }
   ]
  },
  {
    name: 'group2',
    items: [
     { value: 'five', label: 'Five' },
     { value: 'six', label: 'Six' }
   ]
  }
];

When using Object options you can add to each option:

  • a className string to further customize the dropdown, e.g. adding icons to options
  • a view node to render an isolated view in the dropdown options list which is different from what could be seen in the dropdown control (selected value)
  • an id string can be used to give an id to each option. Must be unique; even when mixing grouped options with single options. Useful for when option.value is not a string or number. Can be used with a custom matcher to determine the selected option.

Disabled

<Dropdown disabled option={options} value={defaultOption} />

matcher

The default matcher will use the value prop to match against values within the options array.

custom matcher example:

const value = 'custom-id';
const options = [{ id: 'custom-id', value: 1, label: 'awesome' }];

<Dropdown
  option={options}
  value={value}
  matcher={(item, val) => {
    // item => { id, option: {id, value, label} }
    return item.id === val;
  }}
/>;

Customizing

Classname Targets
rdn main wrapper div
rdn-control dropdown control
rdn-control-arrow dropdown arrow indicator
rdn-control-placeholder placeholder / selected item in dropdown control
rdn-drop container for dropdown options
Using custom arrows

arrowClosed, arrowOpen

The arrowClosed & arrowOpen props enable passing in custom elements for the open/closed state arrows.

<Dropdown
  arrowClosed={<span className="arrow-closed" />}
  arrowOpen={<span className="arrow-open" />} />;

More examples in the stories folder.

Migration

v4 => v5
  • import statements have changed, please update imports.
  • added Typescript support using rollup
v3 => v4
  • removed configurable classNames placeholderClassName, arrowClassName, menuClassName and controlClassName
  • changed classNames to use className prefixing. stylesheets targeting the v3 component will need to be updated
v2 => v3
  • onChange always returns an object with aleast {value, label}
  • option.type is no longer needed to determine if the option is a group. Once the option has an items array then it is assumed to be a group.

Download Details:

Author: iambumblehead Live Demo: View The Demo Download Link: Download The Source Code Official Website: https://github.com/iambumblehead/react-dropdown-now License: MIT

react javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to Select and Hire the Best React JS and React Native Developers?

Hire React JS developer from Technoduce, we have a team of experienced and expert Angular JS developer. With our hire React JS developer, you have complete control over the technical resource throughout the development process.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Top VSCode Extensions for React, React Native, JavaScript and Productivity

Bunch of VSCode Extensions that improve quality of your coding time no matter what stack you are using. In this post, you'll see Top VSCode Extensions for React, React Native, JavaScript and Productivity

React cloneElement: A Better Way to Build a Component API Props in ES6 Javascript and Ts

Using the React cloneElement is a better way to build a component API props in ES6 Javascript and Typescript. Here's a tutorial on how to do so.