# road-dropdown

> Dropdown with Web Components

Latest version **1.0.8** (published 2019-06-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install road-dropdown
pnpm add road-dropdown
yarn add road-dropdown
bun add road-dropdown
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-06-08 |
| First published | 2019-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Robin Wieruch |
| Maintainers | rwieruch |

## Links

- npm: https://www.npmjs.com/package/road-dropdown
- npm.io page: https://npm.io/package/road-dropdown

## Recent versions

- 1.0.8 (latest) — 2019-06-08
- 1.0.6 — 2019-06-04
- 1.0.5 — 2019-06-04
- 1.0.4 — 2019-06-04
- 1.0.3 — 2019-06-04
- 1.0.2 — 2019-06-04
- 1.0.1 — 2019-06-04
- 1.0.0 — 2019-06-04

## README

# Dropdown with Web Components

[![Build Status](https://travis-ci.org/rwieruch/web-components-dropdown.svg?branch=master)](https://travis-ci.org/rwieruch/web-components-dropdown) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/web-components-dropdown.svg)](https://greenkeeper.io/)

Dropdown as Web Componment.

* [Learn how to build Web Components.](https://www.robinwieruch.de/web-components-tutorial)
* [Learn how to use Web Components in React.](https://www.robinwieruch.de/react-web-components)

## How to use:

Install: `npm install road-dropdown`

### Vanilla JS + HTML

Usage with attributes only except for function:

```
// HTML

<road-dropdown
  label="Dropdown"
  option="option2"
  options='{ "option1": { "label": "Option 1" }, "option2": { "label": "Option 2" } }'
></road-dropdown>
```

```
// JavaScript

document
  .querySelector('road-dropdown')
  .addEventListener('onChange', value => console.log(value));
```

Alternative with properties for object/array:

```
// HTML

<road-dropdown
  label="Dropdown"
  option="option2"
></road-dropdown>
```

```
// JavaScript

document.querySelector('road-dropdown').options = {
  option1: { label: 'Option 1' },
  option2: { label: 'Option 2' },
};

document
  .querySelector('road-dropdown')
  .addEventListener('onChange', value => console.log(value));
```

### React

```
import React from 'react';

// npm install road-dropdown
import 'road-dropdown';

const Dropdown = ({ label, option, options, onChange }) => {
  const ref = React.createRef();

  React.useEffect(() => {
    const handleChange = customEvent => onChange(customEvent.detail);

    ref.current.addEventListener('onChange', handleChange);

    return () => ref.current.removeEventListener('onChange', handleChange);
  }, []);

  return (
    <road-dropdown
      ref={ref}
      label={label}
      option={option}
      options={JSON.stringify(options)}
      onChange={onChange}
    />
  );
};

export default Dropdown;
```

### React with Hook

Hook to use Web Components in React Components: [use-custom-element](https://github.com/the-road-to-learn-react/use-custom-element).

```
import React from 'react';

// npm install road-dropdown
import 'road-dropdown';

// npm install use-custom-element
import useCustomElement from 'use-custom-element';

const Dropdown = props => {
  const [customElementProps, ref] = useCustomElement(props);

  return <road-dropdown {...customElementProps} ref={ref} />;
};
```

## Contribution

* `git clone git@github.com:rwieruch/web-components-dropdown.git`
* cd web-components-dropdown
* npm install
* npm start
* visit `http://localhost:8080`

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