@mindemangou/magiccomponents

MagicComponents

MagicComponents is a JavaScript library that allows you to easily create custom elements

Features

• Reusable Components: Create modular and reusable UI components.
• Lightweight: Minimal dependencies for fast performance.

Installation

You can install MagicComponents via

npm install @mindemangou/magiccomponents

or

pnpm install @mindemangou/magiccomponents

Usage

Here’s a quick example of how to use MagicComponents:

import { define} from "@mindemangou/magiccomponents"

define({tagname:'app-app'},async ({element})=> {
    
    console.log(element)
    
})

Data attribut

Each data-* attribute you add to the component becomes a property accessible via props Use the refreshProps function to refresh data attributes retrieved from the server

    <app-app 
    data-name="doe" 
    data-isAdmin='false' 
    data-json='{"country":"benin"}'>
      
    </app-app>

import { define} from "@mindemangou/magiccomponents"

define({tagname:'app-app'},async ({element,props,refreshProps})=> {
    
    console.log(props) //{ tagName:'app-app',isAdmin:'false',json:{country:"benin"} }
    refreshProps()
})

⚠️ Important:If you mount a component in multiple places within your application, the refreshMagicData method will not work unless you add a data-key attribute to each instance of the component.

    <app-app 
    data-key='key1'></app-app>

    <app-app 
    data-key='key2'></app-app>

Shadow Dom

To enable component isolation using the Shadow DOM, set the allowShadowDom property to true.

⚠️ Important: Once rendered inside the Shadow DOM, the component is no longer influenced by global CSS styles. To inject external styles into the component, use the stylecontent property

import { define} from "@mindemangou/magiccomponents"
import stylecontent from './css/style.css?raw'

define({tagname:'app-app',allowShadowDom:true,stylecontent},async ({element})=> {
    
    element.innerHTML="<h1 class='name' >John Doe</h1>"
    
})

Documentation

For detailed documentation and examples, visit the official documentation.

License

MagicComponents is licensed under the MIT License.

---

Happy coding with MagicComponents!