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

Was this helpful?

  1. API References
  2. Frontend

importUI()

The importUI function simplifies UI component imports using aliases from a JSON configuration, promoting a modular and organized project structure for improved code manageability.

Example of importing a header file to a listing page.

  • config.json header file:

"aliases": [
    {
        "fileName": "header.tsx",
        "alias": "@header"
    }
]
  • Listing Page:

import { importUI } from '@magicjs.dev/frontend';

const Header = importUI("@mern.ai/header");

return (
    <div>
        <Header />
        <div>
            {/* Other components */}
        </div>
    </div>
);
PreviouscreateUploader() NextloadConfig()

Last updated 1 year ago

Was this helpful?

Click here to refer GitHub.