@mint-au/mint-au-sections
v0.0.16
Published
---
Downloads
24
Readme
mint-au-sections
Description: This can be utilized as an ES6 module and embedded into HTML, JSP, etc.
Usage
Vanilla JS / HTML / JSP
Integrate the following HTML and JavaScript into your web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Project</title>
</head>
<body>
<div id="mint_hub-lonely"></div> <!-- React will render here -->
<p>Hello World!</p>
<div id="mint_hub-mint"></div> <!-- React will render here -->
<script src="https://unpkg.com/@mint-au/mint-au-sections/index.umd.js" type="module" defer></script>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
window.renderReactMintHubComponents.init({
show: true,
components: [
{ id: 'lonely', component: 'Lonely', props: { message: "Hello from Lonely!" } },
{ id: 'mint', component: 'MintAuSections', props: { message: "Hello from MintAuSections!" } },
]
});
});
</script>
</body>
</html>API
Options (object)
| Option | Type | Default | Description |
|---------------|----------|----------|--------------------------------------------------------------|
| show | boolean| false | Indicates if the components should be displayed. |
| components| array | | A list of components from mint-au-sections that can accept various props based on the component type. |
Example Structure for components (object)
| Property | Type | Description |
|----------------|-------------|----------------------------------------------------------|
| id | string | A unique identifier assigned to each component. |
| component | string | The name of the component as defined in the library. |
| props | any | Custom properties that can be supplied to the component. |
| show | boolean | This is typically set to true by default. |
Adding Elements
To render the components, include the appropriate HTML elements anywhere in your document (HTML, JSP, etc.) using the IDs defined during initialization:
For example:
<div id="lonely"></div>
<div id="mint_hub-mint"></div>Note: If the prefix mint_hub- is not specified during initialization, it will be automatically added for uniqueness. If an ID is not found in the elements or the corresponding component is not included in the initialization, it will not be rendered on the page.
ES6 (deprecated)
Installation
To install the package, execute the following command:
npm install @mint-au/mint-au-sectionsNext, initialize the components with this code:
import { renderReactMintHubComponents } from '@mint-au/mint-au-sections';
renderReactMintHubComponents.init({
show: true,
components: [
{ id: 'lonely', component: 'Lonely', props: { message: "Hello! I am a message property that was passed to you!" } },
{ id: 'mint_hub-mint', component: 'MintAuSections', props: { message: "Hello from MintAuSections!" } },
]
});