Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

wc-react

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wc-react

Web Components wrapper class for React

  • 0.5.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
13K
increased by0.86%
Maintainers
1
Weekly downloads
 
Created
Source

React wrapper for web components

npm GitHub

Use wc-react to simplify usage of web components in React. This is a light wrapper to help manage events and props of the web component.

const MyComponent = wrapWc('my-web-component');

The wrapper syncs props and events to the web component, including when they change and when the component is unmounted.

Installation

npm install wc-react

or

yarn add wc-react

Usage

Import wrapWc at the top:

import {wrapWc} from 'wc-react';

Create a new component that wraps your web component by calling the wrapWc function and pass the tag name of the web component.

const MyComponent = wrapWc('my-web-component');

You can now use MyComponent anywhere in your JSX as if it were a regular React component.

For example, you can set the someProp property of the web component to an object:

const App = (props) => {

  const someObj = {
    prop1: 'bla'
  }

  return <MyComponent someProp={someObj}></MyComponent>;
}

Or register event handlers:

const App = (props) => {

  const handleEvent = (e) => {}

  return <MyComponent event={handleEvent}></MyComponent>;
}

All properties and events map exactly as they are defined on the web component.

Note: React events following the onEvent naming convention are also supported. For example, if you use the onClick event on the React component, wc-react will register the click event with the web component.

Refs

Wrapped components support passing a ref which will get a reference to the underlying web component.

Example with useRef:

const App = (props) => {

  let myRef = React.useRef();

  const handleClick = () => {
    console.log('web component reference', myRef.current)
  }

  return <MyComponent ref={myRef} onClick={handleClick}></MyComponent>;
}

Example with callback:

const App = (props) => {

  const onRefChanged = (element) => {
    console.log('web component reference', element)
  }

  return <MyComponent ref={onRefChanged}></MyComponent>;
}

Typescript

wrapWc supports optional props type to ensure type safety when using the component:

type PersonProps = {
  personDetails: PersonDetails, // object
  showName: boolean,
  personCardInteraction: PersonCardInteraction // enum
}

const Person = wrapWc<PersonProps>('mgt-person');

By default, if no type is provided, any prop will be valid.

Why

If you've used web components in React, you know that proper interop between web components and React components requires a bit of extra work.

From https://custom-elements-everywhere.com/:

React passes all data to Custom Elements in the form of HTML attributes. For primitive data this is fine, but the system breaks down when passing rich data, like objects or arrays. In these instances you end up with stringified values like some-attr="[object Object]" which can't actually be used.

Because React implements its own synthetic event system, it cannot listen for DOM events coming from Custom Elements without the use of a workaround. Developers will need to reference their Custom Elements using a ref and manually attach event listeners with addEventListener. This makes working with Custom Elements cumbersome.

Example

Here is an example of using the vaading-date-picker web component in React.

Without wc-react:

import React from 'react';
import '@vaadin/vaadin-date-picker';

const App: React.FunctionComponent = () => {

  const handleChange = (e) => {/**/}
  const localizedStrings = {/**/}

  return <vaadin-date-picker
          label="When were you born?"
          ref={(element) => {
            if (!element) {
              return;
            }

            element.i18n = localizedStrings;

            // the event listener needs to be removed
            // when the element is unloaded - not shown here
            element.addEventListener('change', (e) => handleChange(e));
          }}>
          </vaadin-date-picker>;
};

With wc-react:

import React from 'react';
import '@vaadin/vaadin-date-picker';
import { wrapWc } from 'wc-react';

const DatePicker = wrapWc('vaading-date-picker');

const App: React.FunctionComponent = () => {

  const handleChange = (e) => {/**/}
  const localizedStrings = {/**/}

  return <DatePicker 
            label="When were you born?" 
            change={handleChange}
            i18n={localizedStrings}>
          </DatePicker>;
};

Keywords

FAQs

Package last updated on 02 Aug 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc