@geops/create-react-web-component
TypeScript icon, indicating that this package has built-in type declarations

3.0.5 • Public • Published

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 = {
  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>

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

Dependents (1)

Package Sidebar

Install

npm i @geops/create-react-web-component

Weekly Downloads

78

Version

3.0.5

License

MIT

Unpacked Size

16.6 kB

Total Files

36

Last publish

Collaborators

  • lb1c
  • friedjoff
  • oterral
  • geops-admin
  • lucien.edel
  • mario.haertwig
  • gevos
  • danji90