https://github.com/the-road-to-learn-react/use-custom-element

Custom hook to bridge Custom Elements (Web Components) to React.
https://github.com/the-road-to-learn-react/use-custom-element

custom-element custom-elements react react-hook react-hooks reactjs web-component web-components

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/the-road-to-learn-react/use-custom-element
• Owner: the-road-to-learn-react
• License: mit
• Created: 2019-06-04T11:50:15.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-05-11T12:03:37.000Z (over 2 years ago)
• Last Synced: 2024-10-01T03:01:16.916Z (about 1 month ago)
• Topics: custom-element, custom-elements, react, react-hook, react-hooks, reactjs, web-component, web-components
• Language: JavaScript
• Homepage: https://www.robinwieruch.de
• Size: 1.97 MB
• Stars: 91
• Watchers: 4
• Forks: 7
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# useCustomElement React Hook

[![Build Status](https://travis-ci.org/the-road-to-learn-react/use-custom-element.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/use-custom-element) [![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/the-road-to-learn-react/use-custom-element.svg)](https://greenkeeper.io/) ![NPM](https://img.shields.io/npm/l/use-custom-element.svg)

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

* [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)

## Installation

`npm install use-custom-element`

## Usage

In this scenario, we are using a specific [Dropdown Web Component](https://github.com/rwieruch/web-components-dropdown) 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 ;

};

```

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 ;

```

### 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 ;

};

```

## Contribute

* `git clone [email protected]:the-road-to-learn-react/use-custom-element.git`

* `cd use-custom-element`

* `npm install`

* `npm run test`

### More

* [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)

* [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)

* [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)