# react-create-custom-element

> Export react component as custom element

Latest version **1.0.6** (published 2020-06-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-create-custom-element
pnpm add react-create-custom-element
yarn add react-create-custom-element
bun add react-create-custom-element
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2020-06-23 |
| First published | 2020-06-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | lissettdm |
| Maintainers | lissettdm |
| Keywords | react, element, web, component |

## Links

- npm: https://www.npmjs.com/package/react-create-custom-element
- Repository: https://github.com/lissettdm/react-custom-element
- Homepage: https://github.com/lissettdm/react-custom-element.git#readme
- Issues: https://github.com/lissettdm/react-custom-element.git/issues
- npm.io page: https://npm.io/package/react-create-custom-element

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2020-06-23
- 1.0.5 — 2020-06-17
- 1.0.4 — 2020-06-17
- 1.0.3 — 2020-06-15
- 1.0.2 — 2020-06-09
- 1.0.1 — 2020-06-09
- 1.0.0 — 2020-06-09

## README

# Export react components as custom element

## Getting Started

npm install react-create-custom-element

**Requires react and react-dom as a peer dependency.**

## Usage

We can create react micro frontend projects and export them as custom elements


```javascript
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import createElement from "react-create-custom-element";

// return HTMLElement
createElement(
  SomeReactComponent, // component
  {
    tagName: "timer-ce", // tag name for custom element
    properties: ["name"], // properties
    customEvents: ["onUpdate"], // events
  }
);

const App = () => {
  const [name, setName] = useState("timer");
  useEffect(() => {
    setInterval(() => {
      // property changes
      setName(new Date().getTime());
      console.log("change");
    }, 3000);

    // listen onUpdate
    document
      .getElementsByTagName("timer-ce")[0]
      .addEventListener("onUpdate", (e) => console.log("updated"));
  });
  return <timer-ce name={name} />;
};
ReactDOM.render(<App />, document.getElementById("root"));
```

## With Shadow DOM

```javascript
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import createElement from "react-create-custom-element";

createElement(
  SomeReactComponent, // component
  {
    tagName: "timer-ce", // tag name for custom element
    properties: ["name"], // properties
    customEvents: ["onUpdate"], // events
    shadowDOM: true,
    mode: "open", // 'open' || 'close'
  }
);

const App = () => {
  const [name, setName] = useState("timer");
  useEffect(() => {
    setInterval(() => {
      // property changes
      setName(new Date().getTime());
      console.log("change");
    }, 3000);

    // listen onUpdate
    document
      .getElementsByTagName("timer-ce")[0]
      .addEventListener("onUpdate", (e) => console.log("updated"));
  });
  return <timer-ce name={name} />;
};
ReactDOM.render(<App />, document.getElementById("root"));
```

## Get the HTLMElement and then define the custom element

```javascript
import React, { useState, useEffect, useRef } from "react";
import PropTypes from "prop-types";
import createElement from "react-create-custom-element";

const App = () => {
  useEffect(() => {
    
    /** notice the tagName property is missing.
     * The custom element won't be created */
    const htmlElement = createElement(
      SomeReactComponent, // component
      {
        shadowDOM: true,
        mode: "open", // 'open' || 'close'
      }
    );

    // Now we can use the custom element
    window.customElements.define("timer-ce", htmlElement);
  });
  return <timer-ce name={name} />;
};
ReactDOM.render(<App />, document.getElementById("root"));
```

---
_Source: https://npm.io/package/react-create-custom-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._