đź“™
My Docs
lambda-website
lambda-website
  • index
  • General Notes
  • Review-Of-Previous-Concepts
  • Reiew
  • Understanding By Example
  • Spread and Rest
  • REACT-RESOURCES
    • index
    • React-Resources
    • Thinking in React
    • Composition vs Inheritance
    • Using Web Components in React
    • REACT ENVIORMENT
    • Hello World
    • Components And Props
    • JSX
  • projects
    • Project Examples
  • Prerequisites
    • Prerequisites
      • Callbacks
      • Scope
      • Mutability
      • Array-CB-Methods
      • Objects
      • Glossary
  • Advanced
    • Advanced
  • MY_DOCS
    • Docs
    • React Components
    • Composition vs Inheritance
  • Methodologies
    • Node.js versus Next.js - A React Approach
  • Interview
    • Question Set #1:
Powered by GitBook
On this page
  • Using Web Components in React
  • Using React in your Web Components

Was this helpful?

  1. REACT-RESOURCES

Using Web Components in React

PreviousComposition vs InheritanceNextREACT ENVIORMENT

Last updated 3 years ago

Was this helpful?

React and are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.

Most people who use React don’t use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.

Using Web Components in React

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

Note:

Web Components often expose an imperative API. For instance, a video Web Component might expose play() and pause() functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.

Events emitted by a Web Component may not properly propagate through a React render tree. You will need to manually attach event handlers to handle these events within your React components.

One common confusion is that Web Components use “class” instead of “className”.

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

Using React in your Web Components

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);
Web Components