@yanbe/hrnet-dropdown

A Simple Dropdown Component For React

A simple dropdown component for React.

Prerequisites:

• NodeJS (Version 14 or higher)

• NPM

• The recommended IDE to use is Visual Studio Code.

Description

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.

Installation

• You can install the component using the following command:
• npm install @yanbe/hrnet-dropdown

Usage

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";

Example

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"
      style={{ 
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center" 
      }}>

      <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;

Props

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.