@baptistej/react-dropdown

A simple, customizable and accessible React dropdown component

Table of Contents

• Installation
• API documentation
• Examples
• Demo

Installation

To install, you can use npm or yarn:

$ npm install --save @baptistej/react-dropdown
$ yarn add @baptistej/react-dropdown

API documentation

You can refer to the API documentation for a complete reference.

Examples

Here is a simple example of react-dropdown being used in an app with some custom styles and focusable input elements within the modal content:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Dropdown from "@baptistej/react-dropdown";
import "@baptistej/react-dropdown/dist/style.css";

function App() {
  const [reset, setReset] = useState(false);

  const handleReset = () => {
    setReset(!reset);
  };

  return (
    <div>
      <Dropdown
        id="dropdown-id"
        data={["Option 1", "Option 2", "Option 3"]}
        placeholder="Select an option"
        reset={reset}
        enableDefaultClassName={true}
        theme="dark"
        styles={{
          dropdown: {
            width: "400px",
          },
          dropdownSelected: {
            backgroundColor: "green",
          },
          dropdownSelectedText: {
            color: "orange",
          },
          dropdownArrow: {
            border: "solid orange",
            borderWidth: "0 3px 3px 0",
          },
          dropdownList: {
            backgroundColor: "green",
          },
          dropdownItem: {
            color: "white",
          },
        }}
        onSelected={(selected) => console.log(selected)}
      />
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

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

Demo