rc-dropdown-ext

Note

The purpose of this package is to extend the function of another package rc-dropdown.

However, as of today, the latest version of rc-dropdown has already addressed the issue.

So always consider use latest version of rc-dropdown without this package, unless you have to stick with version ^2.4.1 of rc-dropdown for some reason.

Introduction

A wrapper of rc-dropdown so we can have elements other than rc-menu inside rc-dropdown

Install

Usage

For APIs, you can reference to https://github.com/react-component/dropdown/blob/master/README.md#api

The difference is that with the orginal version of rc-dropdown you can't use elements other than rc-menu as overlay. (You can. but there were bugs, for example every time you click on the overlay, it disappears)

But now you can.

Demo

Example

import React from "react";
import ReactDOM from "react-dom";
import Dropdown from "rc-dropdown-ext";
import "rc-select/assets/index.css";
import Select, { Option } from "rc-select";
import FilterIcon from "@material-ui/icons/FilterList";

class App extends React.Component {
  render() {
    const options = ["U.S.A", "Sweden", "China"];

    const overlay = (
      <div>
        <Select
          showSearch
          allowClear
          optionLabelProp="children"
          optionFilterProp="children"
          filterOption={(input, option) =>
            option.props.children.toLowerCase().indexOf(input.toLowerCase()) >=
            0
          }
          style={{
            width: "300px"
          }}
        >
          {options.map(option => (
            <Option key={option} value={option}>
              {option}
            </Option>
          ))}
        </Select>
      </div>
    );

    return (
      <div>
        <Dropdown trigger={["click"]} overlay={overlay}>
          <FilterIcon style={{ cursor: "pointer" }} />
        </Dropdown>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));