TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

HRnet plugin

Project carried out as part of the Front-End Web Development Career Path of OpenClassrooms.

Table of contents



p14-hrnet-plugin is a custom select menu component made specially for my 14th OpenClassrooms project. For this project I had to convert an old JQuery app into a React app.

The old app was relying on several JQuery plugins and I had to convert one into a React component library and host It as an npm package. I decided to convert the selectmenu.

About the plugin

In order to convert the original plugin into a React component, I had to make some changes to follow React's philosophy. However, I tried to keep the same structure and implement all the features that were present in the original plugin. I have also added additional features that I have considered useful to add (like a scroll bar when the list of options is long).

Note: the plugin will be downloaded from this npm registry by default, but If needed you can also use It from the GitHub Packages registry (see here for more info about installing a GitHub package)

Keyboard interaction

When the menu is open, the following key commands are available:

  • UP/LEFT: Move focus to the previous item.
  • DOWN/RIGHT: Move focus to the next item.
  • END/PAGE DOWN: Move focus to the last item.
  • HOME/PAGE UP: Move focus to the first item.
  • ESCAPE: Close the menu.
  • ENTER/SPACE: Select the currently focused item and close the menu.

When the menu is closed, the following key commands are available:

  • UP/LEFT: Select the previous item.
  • DOWN/RIGHT: Select the next item.
  • END/PAGE DOWN: Select the last item.
  • HOME/PAGE UP: Select the first item.
  • ENTER/SPACE: Open the menu.

How to use

Use the plugin in your project

If you want to use this library in your (React) project, you can install It from the command line :

npm install @leoncik/p14-hrnet-plugin@1.0.0

Then, import the SelectMenu from the library and start using It :

import { SelectMenu } from '@leoncik/p14-hrnet-plugin';

function myComponent() {
    return (
        <div className="myComponent">
            <p>What is your favourite color?</p>
            <SelectMenu options={['Blue', 'Green', 'Red']} />

export default myComponent;

Work on the plugin


  1. Get this repository's content by direct download or by cloning It :
git clone https://github.com/leoncik/LeonardWojcik_14_30082022_plugin.git
  1. Make sure that Node.js is installed on your machine and that you have a package manager (like npm or yarn).

Then install the dependencies :

yarn install
  1. You are ready to go!

Visualize and edit the project

You can visualize the changes made on the plugin easily with storybook (It will act like a dev server). To run storybook, run :

yarn storybook

Once the changes are made and that you are ready to bundle the plugin, run yarn build to build It. It will now be ready to be published!

Use the tests

To run and watch the tests in the console, run : yarn test.

To get a coverage report while running the tests, run : yarn coverage. If you want to visualize the coverage report, you can run a live server (if you are using VSCode, I recommend using LiveServer) and use this url :

Available properties

Name Type Default Description
options array [] An array containing the list of options for the select menu.
optionsValues array undefined An array containing the options values for the select menu. If not set, the value of the select menu will be taken from the option property.
label string undefined Set the text content inside the button that triggers the select menu. By default It will use the first option as label.
id string undefined Set the id of the select menu (useful to link to a label element).
inputRef any null Set ref to the select input element of the select menu. You can easily access the value of the input with something like : "yourRef.current.value".
width number 210 The width of the menu, in pixels.
maxHeight number 200 The maximum height of the menu, in pixels. Only applied if the scrollable property is set to true.
scrollable boolean true Makes the menu scrollable (useful if there are many options).
offsetX number 0 Offset of the menu on the X axis (negative values are allowed).
offsetY number 0 Offset of the menu on the Y axis (negative values are allowed).
buttonIconPath string "static/media/lib/assets/chevron-down.svg" Path to the icon to be displayed in the select menu button.
className string undefined Added class name of the select menu. By default, the menu has the className : "select-menu".
showButtonIcon boolean true Hide or show the icon on the button of the select menu.
rotateButtonIcon boolean true Rotate the icon on the button of the select menu.
optionsFontSize string or undefined undefined Font-size of the options (in px).
mainColor string "#007fff" The main color for the menu (used for most active, hover and focus states of the select menu).
optionTextColor string "black" The default text color of the options.
optionTextFocus string "white" The text color of the option if hovered or focused.
buttonTextColor string "#454545" The default text color of the button.
buttonBackgroundHoverColor string "#ededed" The background color of the button when overed.
buttonTextHoverColor string "#2b2b2b" The text color of the button if hovered.
buttonTextActiveColor string "white" The text color of the button if clicked.

Package Sidebar


npm i @leoncik/p14-hrnet-plugin

Weekly Downloads






Unpacked Size

92.7 kB

Total Files


Last publish


  • leoncik