1.0.9 • Published 1 year ago
dropdown-menu-component v1.0.9
React Component
React dropdown menu component.
This is an OpenClassrooms project, not intended to be maintained over time!
Summary
Prerequisites
- An IDE like
VSCode, Vim, IntelliJ...
- Node.js > v.18
- Git
Properties
All properties with a * are required :
dropdown-menu-component
id
*: {String}htmlFor
label and theid
span that contains selected optionlabel
*: {String}label
text contentdataOptions
*: {Array} Options' list arrayerror
*: {String} Error text when submit form without any choiceonUpdate
*: {Function} Action to do when an option is selected
Example
We take the example of a US state selector :
import React from "react";
import { DropdownMenu } from "dropdown-menu-component";
const MyForm = () => {
const dataDropdown = [
{
id: "state",
label: "State"
}
];
const states = [
{
name: "Alabama",
abbreviation: "AL"
},
{
name: "Alaska",
abbreviation: "AK"
},
{
name: "American Samoa",
abbreviation: "AS"
},
// Add as many states as necessary
];
const errorText = "Please select a state";
const handleState = (newValue, newAbbreviation) => {
console.log(newValue, newAbbreviation);
// Do what you want with newValue and newAbbreviation
};
return(
<div>
<form>
<DropdownMenu
id={dataDropdown.id}
label={dataDropdown.label}
dataOptions={states}
error={errorText}
onUpdate={handleState}
/>
<Button type="submit">Save</Button>
</form>
</div>
)
}