Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
@yanbe/hrnet-dropdown
Advanced tools
Readme
A simple dropdown component for React.
This is a simple dropdown menu component for React. You can use it to display a number of elements on a list when clicking on the dropdown menu.
Some CSS styles are applied by default, but you can use a few props to change the style of the component (see the Example section below).
You can interact with the component with you keyboard. It is entirely focusable. Here are the keyboard options :
ENTER
: Opens the dropdown menu. When a choice is highlighted, pressing Enter will select the choice and close the menu.
UP
: Will move the highlight to the selected option up on the list.
DOWN/RIGHT
: Will move the highlight to the selected option down on the list.
PAGE UP
: Will move the highlight to the first option on the list.
PAGE DOWN
: Will move the highlight to the last option on the list.
ESCAPE
: Closes the dropdown menu.
$ npm i @yanbe/hrnet-dropdown
This component is a React component, and should be usable in any React application.
You can import the Dropdown component like this :
import { Dropdown } from "@yanbe/hrnet-dropdown";
Here is an example of the component being used in a simple way :
import React, { useState } from "react";
import { Dropdown } from "@yanbe/hrnet-dropdown";
function App() {
// This is a simple array containing the data that will be used for the dropdown in this example
const options = [
"Option 1",
"Option 2",
"Option 3",
"Option 4",
"Option 5",
"Option 6",
"Option 7",
"Option 8",
"Option 9",
"Option 10"
];
// We use a React State to handle the selection of an option
const [selectedOption, setSelectedOption] = useState("");
const handleSelectedOption = (option) => {
setSelectedOption(option);
};
return (
<div className="App">
<h1>Dropdown Demo</h1>
<Dropdown
data={options}
label="Choices"
placeholder="Please Select An Option"
onSelected={handleSelectedOption}
id="dropdown-example"
errorMessage=""
containerStyle={{
width: '300px'
}}
toggleStyle={{
backgroundColor: '#eee',
padding: '10px'
}}
menuStyle={{
backgroundColor: '#fff',
border: '1px solid #ccc',
borderRadius: '4px'
}}
itemStyle={{
padding: '8px 12px',
cursor: 'pointer'
}}
highlightedStyle={{
backgroundColor: '#f0f0f0'
}}
/>
<p>Your choice : {selectedOption}</p>
</div>
);
}
export default App;
Prop | Type | Description |
---|---|---|
data | arrayOf string | Required. The data passed to the dropdown menu. |
label | string | The label text above the dropdown menu. |
placeholder | string | The text showing by default on the dropdown menu. |
onSelected | func | The callback function called when a choice is selected. |
id | string | The unique ID of the dropdown menu. |
errorMessage | string | The error message showing below the dropdown that you can enable if needed. |
containerStyle | object | Empty by default. Prop to enable CSS styles that you can apply to the dropdown container. |
toggleStyle | object | Empty by default. Prop to enable CSS styles that you can apply to the dropdown toggle. |
menuStyle | object | Empty by default. Prop to enable CSS styles that you can apply to the dropdown menu. |
itemStyle | object | Empty by default. Prop to enable CSS styles that you can apply to the dropdown list. |
highlightedStyle | object | Empty by default. Prop to enable CSS styles that you can apply to a highlighted list element. |
FAQs
A simple dropdown menu component for React
We found that @yanbe/hrnet-dropdown demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).