npm package: @mint-au/mint-au-sections
Description: ---
Latest version: 0.0.16

# 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:

```html
<!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:

```html
<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:

```bash
npm install @mint-au/mint-au-sections
```

Next, initialize the components with this code:

```javascript
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!" } },
    ]
});
```