Skip to content
Custom hook to bridge Custom Elements (Web Components) to React.
Branch: master
Clone or download
Latest commit 4fe8315 Jun 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Jun 17, 2019
src add custom mapping Jun 8, 2019
.babelrc first commit Jun 4, 2019
.gitignore first commit Jun 4, 2019
.npmignore first commit Jun 4, 2019
.prettierrc first commit Jun 4, 2019
.travis.yml first commit Jun 4, 2019
LICENSE first commit Jun 4, 2019
README.md modify README.md Jun 8, 2019
package-lock.json first commit Jun 4, 2019
package.json add custom mapping Jun 8, 2019
webpack.config.js first commit Jun 4, 2019

README.md

useCustomElement React Hook

Build Status Slack Greenkeeper badge NPM

Custom hook to bridge Custom Elements (Web Components) to React.

Installation

npm install use-custom-element

Usage

In this scenario, we are using a specific Dropdown Web Component as a React Dropdown Component. By using the custom React hook, we can provide all props in the right format to the custom element and register all event listeners (e.g. onChange from props) behind the scenes.

import React from 'react';

// Web Component Use Case
// install via npm install road-dropdown
import 'road-dropdown';

import useCustomElement from 'use-custom-element';

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

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

Afterward, the Dropdown component can be used:

const props = {
  label: 'Label',
  option: 'option1',
  options: {
    option1: { label: 'Option 1' },
    option2: { label: 'Option 2' },
  },
  onChange: (value) => console.log(value),
};

return <Dropdown {...props} />;

Custom Mapping

You can also define a custom mapping:

import React from 'react';

// Web Component Use Case
// install via npm install road-dropdown
import 'road-dropdown';

import useCustomElement from 'use-custom-element';

const Dropdown = props => {
  const [customElementProps, ref] = useCustomElement(props, {
    option: 'selected',
    onChange: 'click',
  });

  console.log(customElementProps);

  // label: "Label"
  // options: "{"option1":{"label":"Option 1"},"option2":{"label":"Option 2"}}"
  // selected: "option1"

  // and "onChange" mapped to "click" event for the event listener

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

Contribute

  • git clone git@github.com:the-road-to-learn-react/use-custom-element.git
  • cd use-custom-element
  • npm install
  • npm run test

More

You can’t perform that action at this time.