@mhub/home-widgets

1.0.8 • Public • Published

MHub Home Widgets

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

Getting Started

Development server

  1. Install dependencies.

    npm install
  2. Start dev server.

    npm start

Build

  1. Compile dist/.

    npm run build

NPM publish

  1. Publish to npm as public package. Remember to not include any private credentials in this repository.

    npm publish --access public

Versioning

  1. 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

  1. Install npm package.

    npm install @mhub/home-widgets
  2. 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>
  3. 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

  1. 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.

Readme

Keywords

Package Sidebar

Install

npm i @mhub/home-widgets

Weekly Downloads

1

Version

1.0.8

License

ISC

Unpacked Size

1.36 MB

Total Files

4

Last publish

Collaborators

  • mhub_admin