https://github.com/rwieruch/web-components-dropdown
Dropdown built as Web Componment.
https://github.com/rwieruch/web-components-dropdown
dropdown web-component web-components
Last synced: 6 months ago
JSON representation
Dropdown built as Web Componment.
- Host: GitHub
- URL: https://github.com/rwieruch/web-components-dropdown
- Owner: rwieruch
- License: mit
- Created: 2019-06-04T07:44:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-08T15:49:29.000Z (over 5 years ago)
- Last Synced: 2024-10-05T11:16:13.099Z (about 1 year ago)
- Topics: dropdown, web-component, web-components
- Language: JavaScript
- Homepage: https://www.robinwieruch.de
- Size: 675 KB
- Stars: 22
- Watchers: 2
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dropdown with Web Components
[](https://travis-ci.org/rwieruch/web-components-dropdown) [](https://slack-the-road-to-learn-react.wieruch.com/) [](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
```
```
// JavaScript
document
.querySelector('road-dropdown')
.addEventListener('onChange', value => console.log(value));
```
Alternative with properties for object/array:
```
// HTML
```
```
// 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.useLayoutEffect(() => {
const handleChange = customEvent => onChange(customEvent.detail);
ref.current.addEventListener('onChange', handleChange);
return () => ref.current.removeEventListener('onChange', handleChange);
}, []);
return (
);
};
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 ;
};
```
## Contribution
* `git clone git@github.com:rwieruch/web-components-dropdown.git`
* cd web-components-dropdown
* npm install
* npm start
* visit `http://localhost:8080`