use-custom-element
use-custom-element
npm i use-custom-element
use-custom-element

use-custom-element

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

by the-road-to-learn-react

1.0.5 (see all)License:MITTypeScript:Not Found
npm i use-custom-element
Readme

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

Downloads/wk

15

GitHub Stars

82

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

4

OPEN PRs

6
VersionTagPublished
1.0.5
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate