3 Approaches to Integrate React with Custom Elements

Web Components, with their portability and browser compatibility, offer compelling advantages for web developers, particularly in large organizations aiming for consistent user experiences across various frameworks. However, a common misconception exists that React, a leading front-end library, doesn't integrate well with Web Components. This article dispels that myth by demonstrating seamless integration techniques.

While React's compatibility with Web Components could be enhanced, the claim of poor integration is inaccurate. We'll explore best practices and limitations, creating wrappers and custom JSX pragmas to achieve tighter coupling between custom elements and React.

Integrating React and Web Components: Three Approaches

Consider React as a coloring book – we'll explore ways to effectively integrate custom elements while adhering to React's structure. We'll use a simple custom element (built with LitElement for ease, but adaptable to custom-built elements) that attaches a text input to the shadow DOM and emits an event on value changes. This element, while basic, effectively illustrates integration techniques applicable to more complex components.

Approach 1: Utilizing ref

React's documentation suggests using ref to access Web Component imperative APIs. This is necessary because React's SyntheticEvent system and declarative DOM element access differ from native DOM events.

We employ React's useRef hook to reference the native DOM element, useEffect and useState to access and render the input's value, and the ref to call the custom element's methods. Crucially, the useEffect block carefully manages event listeners to prevent memory leaks:

useEffect(() => {
  coolInput.current.addEventListener('custom-input', eventListener);
  return () => {
    coolInput.current.removeEventListener('custom-input', eventListener);
  };
});

This approach works, but it's verbose and doesn't feel inherently "React-like."

Approach 2: Employing a Wrapper Component

Creating a React wrapper component simplifies interaction. This wrapper manages the ref, adds/removes event listeners, and provides an API for accessing non-React-accessible element parts. A prop, onCustomInput, triggers a callback from the parent component, optionally including the ref's current value.

function CoolInput(props) {
  const ref = useRef();
  const { children, onCustomInput, ...rest } = props;

  function invokeCallback(event) {
    if (onCustomInput) {
      onCustomInput(event, ref.current);
    }
  }

  useEffect(() => {
    const { current } = ref;
    current.addEventListener('custom-input', invokeCallback);
    return () => {
      current.removeEventListener('custom-input', invokeCallback);
    };
  });

  return <super-cool-input ref="{ref}">{children}</super-cool-input>;
}

This method, along with generic wrappers like reactifyLitElement, streamlines integration.

Approach 3: Leveraging JSX Pragmas

JSX pragmas offer another solution. By importing jsx-native-events, we add a prop type that attaches event listeners. The onEvent prefix triggers event listener addition. This requires a /** @jsx <pragma_name> */</pragma_name> comment to invoke the pragma.

For native property binding instead of React props, react-bind-properties can be used.

The code for the pragma is available on GitHub.

Future Outlook

While React 17 initially planned for improved custom element compatibility, these improvements appear delayed until version 18. Until then, some extra work is required for full custom element integration with React. Hopefully, future React versions will bridge this gap more effectively.

The above is the detailed content of 3 Approaches to Integrate React with Custom Elements. For more information, please follow other related articles on the PHP Chinese website!