# simple-select-menu

> *Create a select menu providing options to select. It can take a placeholder as desired, returns value and can be set back to default state once form has been sent.*

Latest version **0.1.10** (published 2022-05-01) · 0 weekly downloads

## Install

```sh
npm install simple-select-menu
pnpm add simple-select-menu
yarn add simple-select-menu
bun add simple-select-menu
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2022-05-01 |
| First published | 2022-04-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | peanuts-83 |

## Links

- npm: https://www.npmjs.com/package/simple-select-menu
- npm.io page: https://npm.io/package/simple-select-menu

## Dependencies (3)

- [chokidar](https://npm.io/package/chokidar.md) ^3.4.3
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.17.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1

## Recent versions

- 0.1.10 (latest) — 2022-05-01
- 0.1.9 — 2022-05-01
- 0.1.8 — 2022-05-01
- 0.1.7 — 2022-04-30
- 0.1.6 — 2022-04-30
- 0.1.5 — 2022-04-30
- 0.1.4 — 2022-04-28
- 0.1.3 — 2022-04-27
- 0.1.2 — 2022-04-27
- 0.1.1 — 2022-04-27
- 0.1.0 — 2022-04-27

## README

# simple-select-menu - REACT

*Create a select menu providing options to select. It can take a placeholder as desired, returns value and can be set back to default state once form has been sent.*

## Installation

```bash
npm install simple-select-menu
```

## Usage

### Six parameters shall be implemented

---

* **label** {string} - The text to display in front of the select menu. *Optional*
* **options** {array} - Options MUST BE an array. *Required*
  * **case 1** : {string} - Strings used as-is for displayed text, value returned is a lower case version of the string with white spaces converted to underscore ('_').
  * **case 2** : {object} - {name: 'optionText', value: 'returnedValue'}
    * **name** {string} - Displayed text.
    * **value** {string} - Returned value on select.

* **placeholder** {string} - Text displayed at start when no selection has been done. *Optional. Can be either unset or set to false.*
* **log** {boolean} - Displays nodeElement and returned value in console. *Optional. Default to true*.
* **setvalue** {function} - Setter to return the selected value to parent Component. *Required*
* **initComponent** {object} - Init getter/setter to set menu back to default. *Required*
  * **init** {boolean} - Getter to init action state.
  * **setInit** {function} - Setter to set init action to false once menu has gone back too default state.

### Get selected value

---

Set a getter/setter variable using useState() hook and pass the setter function to the component.

### CSS selectors

---
These class selectors allow you to change the menu appearance :

**.simple-select-menu-label** {class} - Label part. *Padding default to 10px.*

**.simple-select-menu-select** {class} - Menu part. *Padding default to 10px and margin default to 5px.*

**.simple-select-menu-option** {class} - Each option of the menu. *No default.*

## Example

This code will help you experiment this simple lib.
Import it and create getter/setter variables in order to give the menus a way to send back the selected values, and to set the select menu back to default state once the form is sent.

Please refer to [usage chapter](#usage) for further explanations.

```javascript
import { render } from 'react-dom'
import { SimpleSelectMenu } from 'simple-select-menu'
import { useEffect, useState } from 'react'
import './index.css'

const App = () => {
  const [menu1Value, setMenu1Value] = useState()
  const [menu2Value, setMenu2Value] = useState()
  const [init, setInit] = useState(false)
  const initComponent = {init, setInit}

  useEffect(() => console.log('INIT MENUS -', init), [init])

  function resetMenu(e) {
    e.preventDefault()
    setInit(true)
  }

  return (
    <form className="container" onSubmit={resetMenu}>
      <h1>Simple select menu</h1>

      <SimpleSelectMenu
        label="Select menu with strings (log = false)"
        options={["Option 1", "Option 2"]}
        placeholder="Please choose an option"
        log={false}
        setvalue={setMenu1Value}
        initComponent={initComponent}
      />
      {menu1Value !== '' && menu1Value !== undefined && <span><em>returned value: {menu1Value}</em></span>}
      <br />

      <SimpleSelectMenu
        label="Select menu with objects (log = true)"
        options={[{ name: 'Option 1', value: 'opt1' }, { name: 'Option 2', value: 'opt2' }]}
        placeholder="Please choose an option"
        initComponent={initComponent}
        setvalue={setMenu2Value}
      />
      {menu2Value !== '' && menu2Value !== undefined && <span><em>returned value: {menu2Value}</em></span>}

      <SimpleSelectMenu
        label="Select menu with objects & no placeholder"
        options={[{ name: 'Option 1', value: 'opt1' }, { name: 'Option 2', value: 'opt2' }]}
        log={false}
        placeholder={false}
        setvalue={setMenu2Value}
        initComponent={initComponent}
      />
      {menu2Value !== '' && menu2Value !== undefined && <span><em>returned value: {menu2Value}</em></span>}

      <button type='submit'>SEND</button>
    </form>
  );
}


render(<App />, document.getElementById('root'))
```

---
_Source: https://npm.io/package/simple-select-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._