UtilityComponents Utility

Overview

This document provides an overview of the UtilityComponents utility 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.

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.

Utilities

Here are the current utilities:

1. 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.

2. 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.

3. 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;

4. Crisp Customer Support

Integrates Crisp Chat into your StartupBolt application to provide real-time customer support.
For detailed instructions and further information, visit: Crisp Chat Integration Guide

5. 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 integrated into the root layout of your application, so no additional setup is required. 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.
You have to extend the utilities constant by adding more utilities as needed.
Here’s an example of adding an extra component:

const utilities = (
    <>
        <Toaster
            toastOptions={{
                duration: 3000,
            }}
        />
        {settings.CRISP.enableCrispChat && <CrispChat />}
        <Tooltip
            id="tooltip"
            className="z-[60] !opacity-100 max-w-sm shadow-lg"
        />
        <CustomComponent /> {/* Add your custom component here */}
    </>
);

By using the UtilityComponents utility, you can easily integrate essential functionalities into your application.

Fetch Utility Updates