MagicJS
mern.aiUniversityGitHub
  • Introduction to MagicJS
  • Why MagicJS?
  • Getting Started & Installation
  • Basic Guide
    • Create a new page using React
    • Navigate between pages
    • Create an API and integrate it with the frontend
    • Authenticate Users
      • Authorise based on Roles
    • Advanced State Management with useContent()
    • Perform CRUD Operations
    • Adding Realtime capabilities using socket
    • Handling file uploads and downloads
  • Advanced Guide
    • Understanding the concept of features in MagicJS
    • Using UI components & functions across multiple Magic Features
    • Advanced Routing of pages
    • Enable SSR
    • Access MongoDB
    • Styling pages using Tailwind CSS
  • Deploying
  • Update MagicJS
  • API References
    • Frontend
      • <LinkDisplay>
      • createSrc()
      • createUploader()
      • importUI()
      • loadConfig()
      • protected()
      • useParams()
      • useAxios()
      • useLogin()
      • useSocket()
      • useContent()
      • usePromise()
      • useNotification()
    • Backend
      • createBackendFunction()
      • data()
      • io()
      • ServerInstance()
      • utils
        • hash()
        • verifyHash()
        • initiateEmailVerification()
        • saveFileToUserUploads()
        • readFileFromUserUploads()
        • removeFileFromUserUploads()
        • assignRoleToUser()
        • unassignRoleFromUser()
        • findAllRolesByUser()
        • isUserInAnyRoles()
        • assignRoleToUser()
Powered by GitBook
On this page
  • importUI()
  • Aliases
  • Configuration
  • Using Aliases with importUI

Was this helpful?

  1. Advanced Guide

Using UI components & functions across multiple Magic Features

PreviousUnderstanding the concept of features in MagicJSNextAdvanced Routing of pages

Last updated 1 year ago

Was this helpful?

Imagine you have an e-commerce homepage (in a MagicJS project), and you've already integrated a powerful magic feature called "Product Catalogue". Now, you want to add a comment section for users to share their thoughts on the listed products.

With MagicJS, you can seamlessly nest one Magic Feature inside another. In this case, you can effortlessly integrate the "Comment" feature into the existing "Product Catalogue" feature. It's as simple as copying the Comment Feature folder and pasting it into the Product Catalogue folder.

What makes this process truly remarkable is that you're not just adding a standalone comment feature; you're incorporating it as a complete package. This means all the functionalities, user interface components, and other necessary elements come integrated seamlessly. It's like placing a fully assembled puzzle piece into another puzzle - everything fits perfectly.

In essence, MagicJS allows you to build complex web applications with ease by stacking features within features. The modular nature of Magic Features ensures that you can enhance your Product Catalogue not just with a comment section but with a fully functional and cohesive package that enriches the overall user experience.

importUI() plays an important role in importing magic features. The importUI() function simplifies UI component imports using "aliases" from a JSON configuration, promoting a modular and organized project structure for improved code manageability.

Aliases

Configuration

In your project, you would have a JSON configuration file "config.json" that associates aliases with specific "Magic Features". This configuration serves as a mapping between the user-friendly alias and the actual file path or module path of the magic feature.

Here's an example for config.json file.

{
    "aliases": [
        {
            "fileName": "comment.tsx",
            "alias": "@comment"
        }
    ]
}

Using Aliases with importUI

The importUI function is then used to dynamically import UI components based on the aliases defined in the configuration.

Here's an example:

import { importUI } from "@magicjs.dev/frontend"
import React from "react"

const Comment = importUI("@comment")

export default function Component(props: any) {
  return (
    <div>
      <Comment />
    </div>
  )
}
importUI()