@cozyrl/headuard NPM

NPM Package: @cozyrl/headuard
GitHub Repository: https://github.com/cozyrl/headuard

Installation

To install Headuard, use npm:

npm install @cozyrl/headuard

Usage

Headuard provides a convenient way to manage essential head elements in your web page. When using Headuard, you can simplify your HTML structure by allowing Headuard to take care of adding necessary head elements for you.

<!doctype html>
<html lang="en">
  
  <head>
    <!-- Leave it to Headuard -->
  </head>
  
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

</html>

import { useEffect } from "react";
import { Headuard } from "headuard";

const BaseLayout = () => {

    useEffect(() => {

        // Create head elements.
        const titleTag = Headuard.createTitle({ textContent: "My Page Title" });
        const metaTag = Headuard.createMeta({ name: "description", content: "This is a description" });
        const baseTag = Headuard.createBase({ href: "/base", target: "_blank" });
        const scriptTag = Headuard.createScript({ src: "script.js", type: "text/javascript", async: true });
        const linkTag = Headuard.createLink({ rel: "stylesheet", href: "styles.css", type: "text/css" });

        // Mount the head elements.
        const mountedElements = [
            titleTag, 
            metaTag, 
            baseTag, 
            scriptTag, 
            linkTag
        ].map(elem => Headuard.mount(elem));

        return () => {
            // Unmount the head elements when the component is cleaned up
            mountedElements.map(elem => Headuard.unmount(elem));  
        }
    }, [])

    return <>...</>;
};

export default BaseLayout;