Getting Started with Dropdown Menu

Module for generating a component select with a options list from an array.

Installation

Using npm :

npm i @cecigiu2b/dropdown-menu-react

Required

- React

TypeScript

a file dropdown-menu-react.d.ts is available in the module.
configuration is required in the file tsconfig.json.

Props required

| Props | Types |
| -------- | ---------------------- |
| name | string |
| options | Array |
| getValue | SetStateAction |

props options must be array type of string or array of object with a key "name"
The prop getValue returns the value of the option chosen by the user.

Style

You can style your component by adding :

- customClassSelect prop (select element)
- customClassOption prop (option elements)

See in the example above

Exemple

In the project directory, you can run:

``



import { DropdownMenu } from '@cecigiu2b/dropdown-menu'

import { useState } from 'React'



const departements = [

  "Sales",

  "Marketing",

  "Engineering",

  "Human Resources",

  "Legal",

];



const states = [

  {

    name: "Alabama",

    abbreviation: "AL",

  },



  {

    name: "American Samoa",

    abbreviation: "AS",

  },

  {

    name: "Arizona",

    abbreviation: "AZ",

  },

  {

    name: "Arkansas",

    abbreviation: "AR",

  },

]



const [valueSelect, setValueSelect] = useState(null)



const Form = () => {

   return (

    

      

                  name="departements"

          options={departements}

          customClassSelect="dropdownSelect"

          customClassOption="dropdownOption"

          getValue={setValueSelect}

        />

        

      

    

  );

};

export default Form;

Version history

- v1.8.1
- Fix: return to module ES
- v1.8.0
- Feat: update to common JS
- v1.7.14
- Fix: add type module
- v1.7.13
- Docs: fix gitignore
- v1.7.12
- Docs: update README
- v1.7.11
- Docs: update licence and keywords
- v1.7.10
- Fix, change text in option default
- v1.7.9
- Patch, add an option to choose
- v1.7.8
- Patch, fix onChange for object
- v1.7.7
- Patch, update file d.ts
- v1.7.6
- Patch, update exemple in README
- v1.7.5
- Patch, get value with state
- v1.7.4
- Patch,refactoring Dropdown
- v1.7.3
- Patch, add test jest, coverage and refactoring Dropdown
- v1.7.2
- Patch, add test jest
- v1.7.1
- Patch, add github repo
- v1.7.0
- Minor, add style in select, data-test-id and update README
- v1.6.1
- Patch, update export
- v1.6.0
- Minor Export index.js and types
- v1.5.0
- Minor Update babel to TypeScript
- v1.4.0
- Fix TypeScript, fix index.tsx, return JSX.ELEMENT
- v1.3.0
- Add TypeScript
- v1.2.0
- Feat : add style to option(s)
- v1.0.0

- Version initiale

## Licence

MIT

Props required

|

props options must be array type of string or array of object with a key "name"
The prop getValue returns the value of the option chosen by the user.

Style

You can style your component by adding :

- customClassSelect prop (select element)
- customClassOption prop (option elements)

See in the example above

Exemple

In the project directory, you can run:

``



import { DropdownMenu } from '@cecigiu2b/dropdown-menu'

import { useState } from 'React'



const departements = [

  "Sales",

  "Marketing",

  "Engineering",

  "Human Resources",

  "Legal",

];



const states = [

  {

    name: "Alabama",

    abbreviation: "AL",

  },



  {

    name: "American Samoa",

    abbreviation: "AS",

  },

  {

    name: "Arizona",

    abbreviation: "AZ",

  },

  {

    name: "Arkansas",

    abbreviation: "AR",

  },

]



const [valueSelect, setValueSelect] = useState(null)



const Form = () => {

   return (

    

      

                  name="departements"

          options={departements}

          customClassSelect="dropdownSelect"

          customClassOption="dropdownOption"

          getValue={setValueSelect}

        />

        

      

    

  );

};

export default Form;