dropdown-component-library-afarkhsi

Dropdown-component-library

Library of React components created using create-react-app.

Prerequisites :

• Node.js
• Npm or Yarn
• Visual studio code or similare

Description:

A simple React dropdown menu component

Installation:

Package installation

Run the followings commands with npm or yarn:

$ npm install dropdown-component-library-afarkhsi
$ yarn add dropdown-component-library-afarkhsi

Import the dropdown menu

import { DropdownMenu } from 'dropdown-component-library-afarkhsi';

Simple example of using:

To define the possible options on your dropdown menu you can pass an array with value and label keys.

import React from 'react';
//import the dropdown menu component
import { DropdownMenu } from 'dropdown-component-library-afarkhsi';

function DropDown() {
  const optionsExample = [
    { label: 'Paris', value: 'paris' },
    { label: 'Lille', value: 'lille' },
    { label: 'Lyon', value: 'lyon' },
    { label: 'Bordeaux', value: 'bordeaux' },
    { label: 'Marseille', value: 'marseille' },
    { label: 'Reims', value: 'reims' },
  ];

  return <DropdownMenu options={optionsExample} />;
}

export default DropDown;

Props

Prop	Type	Description
options	Array	Define the dropdown options
id	string	Define the component id
label	string	Define the component label
placeholder	string	Define the placeholder of the component
defaultValue	string	Define the defaultValue of the component
name	string	Define the name of the component

EventListener option

If you need to retrieve the data displayed on the click menu you must add these lines of code and set your state in your function before calling the 'dropdownEvent' listener with your function as a second parameter.

Example :

const [data, setData] = useState();
// Enclosing application
function myFunction(event: any) {
  // retrieve the object from the event
  const objet = event.detail;
  // Manipulate the object in the enclosing application
  setData(objet);
}

// Adding the event listener dropdownEvent
window.addEventListener('dropdownEvent', myFunction);