GitHub - oterral/create-react-web-component: Set up a React App wrapped in a 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 = {
  stringAttribute: "default value",
}

const props = {
  objectProp: { "key": "value"}
  arrayProp: ["foo"]
}

ReactWebComponent.setAttributes(MyReactComponent.attributes);
ReactWebComponent.setProperties(MyReactComponent.defaultProps);
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.stringAttribute); // --> "default value"
      console.log(elt.objectProp); // --> "{ "key": "value" }"
      console.log(elt.arrayProp); // --> "['foo']"
    </script>
  </body>
</html>

Contributing

Getting Started

Issuess

In the case of a bug report, bugfix or a suggestions, please feel very free to open an issue.

Pull request

Pull requests are always welcome, and I'll do my best to do reviews as fast as I can.

License

This project is licensed under the MIT License

Get Help

Read more about using Web Components with React on the official React Docs

If appropriate, open an issue on GitHub