1.0.19 • Published 2 years 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
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago