@geops/create-react-web-component NPM

Create React Web Component

This project is a fork of the archived but great SimonHoiberg/create-react-web-component.

It includes the React 18 support and removed all cli and styled stuff.

How to use it

In your project:

yarn add @geops/create-react-web-component

Creates the web-component using your React component:

import ReactWebComponent from "@geops/create-react-web-component";
import MyReactComponent from "./MyReactComponent";

const attributes = {
  string: "default value",
}

const properties = {
  object: { "key": "value"}
  array: ["foo"]
}

ReactWebComponent.setAttributes(attributes);
ReactWebComponent.setProperties(properties);
ReactWebComponent.render(MyReactComponent, "my-web-component", { shadow: false });

Then load your module in a HTML page

<html>
  <head>
    <script type="text/javascript" src="your module bundle file"> </script>
  </head>
  <body>
    <my-web-component id="myWebComponent" string="foo"></my-web-component>
    <script>
      const elt = doucment.getElementById('myWebComponent');

      console.log(elt.string); // --> "foo"
      console.log(elt.object); // --> "{ "key": "value" }"
      console.log(elt.array); // --> "['foo']"
    </script>
  </body>
</html>