Skip to content

Latest commit

 

History

History
84 lines (58 loc) · 2.44 KB

README.md

File metadata and controls

84 lines (58 loc) · 2.44 KB

Create React Web Component

NPM Version Github License Build Status

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

yarn install
yarn test

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