1.0.19 • Published 8 months ago
@baptistej/react-dropdown v1.0.19
@baptistej/react-dropdown
A simple, customizable and accessible React dropdown component
Table of Contents
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
1.0.19
8 months ago
1.0.18
8 months ago
1.0.17
8 months ago
1.0.16
8 months ago
1.0.15
8 months ago
1.0.14
8 months ago
1.0.13
8 months ago
1.0.12
8 months ago
1.0.11
8 months ago
1.0.10
8 months ago
1.0.9
8 months ago
1.0.8
8 months ago
1.0.7
8 months ago
1.0.6
8 months ago
1.0.5
8 months ago
1.0.4
8 months ago
1.0.3
8 months ago
1.0.2
8 months ago
1.0.1
8 months ago
1.0.0
8 months ago