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.
In your project:
yarn add @geops/create-react-web-componentCreates 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>yarn install
yarn testIn the case of a bug report, bugfix or a suggestions, please feel very free to open an issue.
Pull requests are always welcome, and I'll do my best to do reviews as fast as I can.
This project is licensed under the MIT License
Read more about using Web Components with React on the official React Docs
- If appropriate, open an issue on GitHub