Docs
Utilities
Utility Components

Utility Components

Overview

This document provides an overview of the UtilityComponents utility function located at utils/components/UtilityComponents.js. This utility simplifies adding common functionality to your application, such as theme management, toast notifications, top loading indicators, and tooltips.

UtilityComponents Wrapper

The UtilityComponents component serves as a wrapper that includes several utilities for your application. It integrates a theme provider, a top loader, toast notifications, and tooltips.

Code

"use client";
 
import { ThemeProvider } from "@/utils/components/ThemeProvider";
import NextTopLoader from "nextjs-toploader";
import { Toaster } from "react-hot-toast";
import { Tooltip } from "react-tooltip";
 
const UtilityComponents = ({ children }) => (
    <>
        <NextTopLoader color="hsl(var(--primary))" showSpinner={false} />
        <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
        >
            {children}
            <Toaster
                toastOptions={{
                    duration: 3000,
                }}
            />
            <Tooltip
                id="tooltip"
                className="z-[60] !opacity-100 max-w-sm shadow-lg"
            />
        </ThemeProvider>
    </>
);
 
export default UtilityComponents;

Utilities

Here are the current utilities:

NextTopLoader

  • The NextTopLoader is used to display a loading indicator at the top of the page during navigation. It's already included in the UtilityComponents, so it works out of the box without any additional setup.
<NextTopLoader color="hsl(var(--primary))" showSpinner={false} />
  • color: Sets the color of the loading indicator.
  • Currently, the primary color defined in /app/globals.css is used as the color of the loading indicator.

ThemeProvider

  • The ThemeProvider is used to add dark mode support to your app using Shadcn. It works out of the box without any additional setup.

Toaster

  • The Toaster is used to display toast notifications.

  • The duration property sets the duration for which the toast is displayed.

  • To use the Toaster for displaying toast notifications, you can import toast from react-hot-toast and use it in your components:

import { toast } from 'react-hot-toast';
 
const notify = () => {
    toast.success('This is a success message!');
    toast.error('This is an error message!');
};
 
const MyComponent = () => (
    <button onClick={notify}>Show Toast</button>
);
 
export default MyComponent;

Tooltip

  • The Tooltip provides tooltips.

  • To use the Tooltip, you can set the data-tooltip-id attribute on elements you want to have tooltips, and the data-tooltip-content for the content:

import { Tooltip } from 'react-tooltip';
 
const MyComponent = () => (
    <>
        <button data-tooltip-id="tooltip" data-tooltip-content="This is a tooltip!">
            Hover me
        </button>
        <Tooltip id="tooltip" />
    </>
);
 
export default MyComponent;

Usage

The UtilityComponents utility is already implemented in the root layout of your application, so there's no need to worry about setting it up. The main usage is to extend it if required.

Extending UtilityComponents

To add more functionalities to UtilityComponents, you can extend it by importing and using additional components or libraries as needed.

Example of adding an additional component:

import { ThemeProvider } from "@/utils/components/ThemeProvider";
import NextTopLoader from "nextjs-toploader";
import { Toaster } from "react-hot-toast";
import { Tooltip } from "react-tooltip";
import CustomComponent from "@/components/CustomComponent"; // Example custom component
 
const UtilityComponents = ({ children }) => (
    <>
        <NextTopLoader color="hsl(var(--primary))" showSpinner={false} />
        <ThemeProvider
            attribute="class"
            defaultTheme="system"
            enableSystem
            disableTransitionOnChange
        >
            {children}
            <Toaster
                toastOptions={{
                    duration: 3000,
                }}
            />
            <Tooltip
                id="tooltip"
                className="z-[60] !opacity-100 max-w-sm shadow-lg"
            />
            <CustomComponent /> {/* Add your custom component here */}
        </ThemeProvider>
    </>
);
 
export default UtilityComponents;

By using the UtilityComponents utility, you can easily integrate essential functionalities into your application, improving its overall robustness and user experience.

Last updated on
Fetch Utility