Modular Components

A Modular Component is a way to render registered pages inside other pages. This allows you to build a modular system or reuse components across your project.

They follow the same structure as Modular Pages, and styling is applied in the same way.

---

Creating a Modular Component

1. Define your component:

module.exports = () => {
  return (<div>Test</div>);
};

1. Register it in main.js using regRoute:

nm.registerModularPage("myCustomButton", __dirname + "/components/Button.jsx");

---

Rendering a Modular Component

Once registered, you can render it in another page by importing Modular:

module.exports = ({ Modular }) => {
  return (
    <div>
      <div>My Page</div>
      <Modular id="myCustomButton" />
    </div>
  );
};

---

Passing Props (Arguments)

Modular accepts props, so you can reuse the same component with different data.

Example Component (Button.jsx):

module.exports = ({ customText }) => {
  return (
    <button style={{ borderRadius: "100%" }}>
      {customText}
    </button>
  );
};

Usage with different props:

module.exports = ({ Modular }) => {
  return (
    <div>
      <div>My Page</div>
      <Modular id="myCustomButton" customText="My First Button" />
      <Modular id="myCustomButton" customText="My Second Button" />
    </div>
  );
};

---

✅ This way, the same modular component can be rendered multiple times with unique arguments.