@mhub/home-widgets

v1.0.8

Published

3 years ago

MHub Home embeddable React widgets

Downloads

0High
0Medium
0Low

mhub_admin

react widget typescript

MHub Home Widgets

MHub Home Widgets built with React designed to be easily embedded to another webpage.

Getting Started

Development server

Install dependencies.
```
npm install
```
Start dev server.
```
npm start
```

Build

Compile dist/.
```
npm run build
```

NPM publish

Publish to npm as public package. Remember to not include any private credentials in this repository.
```
npm publish --access public
```

Versioning

Update package version using npm version command.

npm version "x.x.x" -m "MEANINGFUL COMMIT MESSAGE HERE"

To embed on another webpage

Using npm / Raw script file

Install npm package.
```
npm install @mhub/home-widgets
```
In your node modules, look for node_modules/@mhub/home-widgets/dist and you should see a file named widgets.min.js, include this file in your project.
If your project does not support npm, then you might have to copy the js file to your project directory and include your script as usual.
```
<script src="{PATH_TO_NODE_MODULES}/@mhub/home-widgets/dist/widgets.min.js"></script>
```

All widgets are exported under the name MHubHomeWidgets as a global variable, you can render your widget and use custom props based on your widget. Each widget's constructor function might differs from one another, look at the API documentation for more info. For example:

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Example</title>
		<script src="{PATH_TO_NODE_MODULES}/@mhub/home-widgets/dist/widgets.min.js"></script>
	</head>
	<body>
		<div id="example_root"></div>
		<script>
			window.addEventListener("load", function() {
				// initializing each widgets might differ with one another, read the API documentation for more info
				new MHubHomeWidgets.ExampleWidget("API_ENDPOINT", {
					// ... widget's props
				}).render(document.getElementById("example_root"));
			});
		</script>
	</body>
</html>

Using CDN

Since package is published on npm, using unpkg open source project, we are able to include scripts via CDN. Look at more package version import example using CDN here.

<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Example</title>
		<script src="https://unpkg.com/@mhub/home-widgets@{VERSION}/dist/widgets.min.js"></script>
	</head>

	<body>
		<div id="example_root"></div>
		<script>
			window.addEventListener("load", function() {
				new MHubHomeWidgets.ExampleWidget("API_ENDPOINT", {
					// ... widget's props
				}).render(document.getElementById("example_root"));
			});
		</script>
	</body>
</html>

API Documentation

All of the available widgets uses 3rd-party package formik and yup when dealing with Forms.

TODO

[ ] Better webpack optimization. [ ] Reset form after submission props. [ ] Update API documentation.