# react-dropdown-component-library

> React dropdown component

Latest version **0.5.1** (published 2022-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dropdown-component-library
pnpm add react-dropdown-component-library
yarn add react-dropdown-component-library
bun add react-dropdown-component-library
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.1 |
| Published | 2022-10-22 |
| First published | 2022-10-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 30.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | LOB2018 |
| Maintainers | lob2018 |
| Keywords | react, react-component, component, typescript, dropdown |

## Links

- npm: https://www.npmjs.com/package/react-dropdown-component-library
- Repository: https://github.com/Lob2018/Lobjois_Yann_14_code_plugin_jQuery_072022
- Issues: https://github.com/Lob2018/Lobjois_Yann_14_code_plugin_jQuery_072022/issues
- npm.io page: https://npm.io/package/react-dropdown-component-library

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.5.1 (latest) — 2022-10-22

## README

# Getting Started with React Dropdown Component Library

A library of React component for projects using [Create React App](https://github.com/facebook/create-react-app).

<br />

# react-dropdown-component-library

Created to replace the JQuery's widget [`selectmenu.js`](https://github.com/jquery/jquery-ui/blob/main/ui/widgets/selectmenu.js).

<br />

## Description

It is a single-select combobox component that is functionally similar to an HTML select element. This select-only drop-down list is not created with an `<input>` element and does not accept free-form user input. Users can navigate using the arrow keys, or type characters, and the corresponding option is automatically selected and displayed in the view.

A tooltip shows the returned value, which can be the selected value or a replacement value (with overrideValue).

>  Implements the [ARIA design pattern for combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/), but option list navigation sets the value of the input.

<br />

## Installation

```
npm install react-dropdown-component-library
```

<br />

## Usage

With value as title attribute and the default css

```typescript
import Dropdown from 'react-dropdown-component-library'
import 'react-dropdown-component-library/dist/style.css' // the default CSS

const App = () => {

    const [textValueDropdown1, setTextValueDropdown1] = React.useState("");
    const handleTextValueChangeDropdown1 = (value: string) => {
        setTextValueDropdown1(value ? value : "");
    };

    ...
    // show the selected value in the h1 tag (Marketing)
    return(
        <>            
            <h1>Dropdown value : {textValueDropdown1}</h1>
            <label id="combo-label1">Dropdown 1 with values</label>
            <Dropdown
            labelId="combo-label1"
            defaultValue={{ value: "Marketing" }}
            data={[
                { value: "Marketing" },
                { value: "Engineering" },
                { value: "Human Resources" },
                { value: "Legal" },
            ]}
            messageIfNoData="No data found"
            liftingDropDownValueUp={handleTextValueChangeDropdown1}
            />
        </>
    )
};
export default App;
```

Or with overrideValue as title attribute, and with your own style based [`from the original SASS file`](https://github.com/Lob2018/Lobjois_Yann_14_code_plugin_jQuery_072022/tree/main/src/lib/style.scss).

```typescript
import Dropdown from 'react-dropdown-component-library'
import './style.css'; // your own CSS

const App = () => {

    const [textValueDropdown2, setTextValueDropdown2] = React.useState("");
    const handleTextValueChangeDropdown2 = (value: string) => {
        setTextValueDropdown2(value ? value : "");
    };

    ...
    // show the selected overrideValue in the h1 tag (CA)
    return(
        <>            
            <h1>Dropdown value : {textValueDropdown2}</h1>
            <label id="combo-label2">Dropdown 2 with values</label>
            <Dropdown
            labelId="combo-label2"
            defaultValue={{ value: "California", overrideValue: "CA" }}
            data={[
                {
                    value: "California",
                    overrideValue: "CA",
                },
                {
                    value: "Colorado",
                    overrideValue: "CO",
                },
            ]}
            messageIfNoData="No data found"
            liftingDropDownValueUp={handleTextValueChangeDropdown2}
            />
        </>
    )
};
export default App;
```

<br />

## Documentation

[`The complete documentation of react-dropdown-component-library`](https://lob2018.github.io/Lobjois_Yann_14_code_plugin_jQuery_072022/).

<br />

## CodeSandbox experience

[`Online React Dropdown Component Library code editor and prototyping`](https://codesandbox.io/s/dropdown-pybhpn?file=/src/examples/App.tsx)

---
_Source: https://npm.io/package/react-dropdown-component-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._