Skip to content
Dropdown built as Web Componment.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist changes according to tutorial Jun 8, 2019
src changes according to tutorial Jun 8, 2019
.gitignore final Jun 4, 2019
.npmignore final Jun 4, 2019
.prettierrc first commit Jun 4, 2019
.travis.yml first commit Jun 4, 2019
LICENSE first commit Jun 4, 2019
README.md adjust to useLayoutEffect Jun 8, 2019
package-lock.json first commit Jun 4, 2019
package.json update README.md Jun 8, 2019
webpack.dev.config.js final Jun 4, 2019
webpack.prod.config.js final Jun 4, 2019

README.md

Dropdown with Web Components

Build Status Slack Greenkeeper badge

Dropdown as Web Componment.

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.useLayoutEffect(() => {
    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.

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
You can’t perform that action at this time.