# wc-react
> Web Components wrapper class for React
Latest version **0.5.1** (published 2022-08-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install wc-react
pnpm add wc-react
yarn add wc-react
bun add wc-react
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.1 |
| Published | 2022-08-02 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | metulev |
| Maintainers | metulev |
| Keywords | react, web component, web components, wc |
## Links
- npm: https://www.npmjs.com/package/wc-react
- Repository: https://github.com/nmetulev/wc-react
- Homepage: https://github.com/nmetulev/wc-react#readme
- Issues: https://github.com/nmetulev/wc-react/issues
- npm.io page: https://npm.io/package/wc-react
## Recent versions
- 0.5.1 (latest) — 2022-08-02
- 0.4.0-preview1 (next) — 2021-01-29
- 0.5.0 — 2021-05-11
- 0.4.0 — 2021-01-29
- 0.3.1 — 2020-05-08
- 0.3.0 — 2020-04-05
- 0.2.0 — 2020-04-05
- 0.1.0 — 2020-04-05
## README
# React wrapper for web components
[](https://www.npmjs.com/package/wc-react) 
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.
```tsx
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
```bash
npm install wc-react
```
or
```bash
yarn add wc-react
```
## Usage
Import `wrapWc` at the top:
```tsx
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.
```tsx
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:
```jsx
const App = (props) => {
const someObj = {
prop1: 'bla'
}
return ;
}
```
Or register event handlers:
```jsx
const App = (props) => {
const handleEvent = (e) => {}
return ;
}
```
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`:
```jsx
const App = (props) => {
let myRef = React.useRef();
const handleClick = () => {
console.log('web component reference', myRef.current)
}
return ;
}
```
Example with callback:
```jsx
const App = (props) => {
const onRefChanged = (element) => {
console.log('web component reference', element)
}
return ;
}
```
## Typescript
`wrapWc` supports optional props type to ensure type safety when using the component:
```ts
type PersonProps = {
personDetails: PersonDetails, // object
showName: boolean,
personCardInteraction: PersonCardInteraction // enum
}
const Person = wrapWc('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/](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`](https://vaadin.com/components/vaadin-date-picker/) web component in React.
### Without `wc-react`:
```jsx
import React from 'react';
import '@vaadin/vaadin-date-picker';
const App: React.FunctionComponent = () => {
const handleChange = (e) => {/**/}
const localizedStrings = {/**/}
return {
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));
}}>
;
};
```
### With `wc-react`:
```jsx
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
;
};
```
---
_Source: https://npm.io/package/wc-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._