React Tailwind(css) Alert Component

1. What is React tailwindcss Alert component?

React and tailwindcss are popular frameworks and libraries in modern web development. React is a JavaScript library for building user interfaces, and tailwindcss is a CSS framework for styling. You can combine the two to create a React tailwindcss notification component.

Notification components are used to convey important information to users or to encourage interaction. For example, you can display warnings, success messages, notification messages, and more. These notifications help improve the user experience of your web application and provide users with the information they need.

2. Why use React and tailwindcss together?

Using React with tailwindcss provides developers with a number of advantages.

First, React uses a Virtual DOM to improve performance. The virtual DOM only applies changes to the real DOM, eliminating the need to re-render the entire page. This helps to efficiently handle dynamic elements such as notification components.

Second, tailwindcss makes styling easier by providing predefined style utility classes. By combining classes, you can easily apply the style you want, and you can easily implement responsive design. This helps in flexible configuration of the notification component's appearance and layout.

3. Component example (code)

Alert Component

import React, { useState, useEffect } from 'react';

interface IAlertProps {
    icon: JSX.Element;
    headline: string;
    headlineColor: 'text-green-600' | 'bg-red-600';
    content: JSX.Element;
    hideClose?: boolean;
    bgColor: 'bg-green-100' | 'bg-red-100';
    timer?: number;
}

const Alert = ({ icon, headline, headlineColor, hideClose, timer, bgColor, content }: IAlertProps) => {
    const [isAlertOpen, setAlert] = useState(true);

    useEffect(() => {
        if (timer) {
            const timeId = setTimeout(() => {
                // After xx seconds set the show value to false, if exist timer as props
                setAlert(false);
            }, timer);

            return () => {
                clearTimeout(timeId);
            };
        }
    }, [timer]);

    const closeAlert = () => {
        setAlert(false);
    };

    return (
        <>
            {isAlertOpen && (
                <div className="fixed max-w-fit top-0 right-0 left-0 mx-auto mt-4 z-50">
                    <div className={`relative flex w-full rounded-lg p-4 ${bgColor}`}>
                        {!hideClose && (
                            <div
                                role="button"
                                className="absolute rounded-lg p-1 right-0 top-0 mr-2 mt-2"
                                onClick={closeAlert}
                            >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    className="h-6 w-6"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                    stroke-width="2"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        d="M6 18L18 6M6 6l12 12"
                                    ></path>
                                </svg>
                            </div>
                        )}

                        <div className={`flex w-8 h-8 ${headlineColor}`}>{icon}</div>
                        <div className="px-2">
                            <span className={`mb-2 font-bold ${headlineColor}`}>{headline}</span>
                            <div>{content}</div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

export default Alert;

Props explained

icon: It is literally an icon in svg format. In the example screen, it means a check mark icon.

headline & headlineColor: Put the title in string format, and decorate the color with tailwindcss `text...`. (required, can be modified)

content: Content can be entered in any format as long as it is jsx, and must be entered.

hideClose : It can also be disabled with the close button on the right.

bgColor : As the background color of the Alert window, you can also enter it using tailwincss `bg...`.

timer: SetTimeout & clearTimeout means how long the window disappears. In the example, 3 seconds (3000) were entered.

Example of using Alert Component (import)

            <Alert
                timer={3000}
                headline="Success"
                headlineColor="text-green-600"
                bgColor="bg-green-100"
                content={<span className="text-sm">Login succesful</span>}
                icon={
                    <svg
                        clip-rule="evenodd"
                        fill-rule="evenodd"
                        stroke-linejoin="round"
                        stroke-miterlimit="2"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="currentColor"
                        stroke="currentColor"
                    >
                        <path
                            d="m11.998 2.005c5.517 0 9.997 4.48 9.997 9.997 0 5.518-4.48 9.998-9.997 9.998-5.518 0-9.998-4.48-9.998-9.998 0-5.517 4.48-9.997 9.998-9.997zm0 1.5c-4.69 0-8.498 3.807-8.498 8.497s3.808 8.498 8.498 8.498 8.497-3.808 8.497-8.498-3.807-8.497-8.497-8.497zm-5.049 8.886 3.851 3.43c.142.128.321.19.499.19.202 0 .405-.081.552-.242l5.953-6.509c.131-.143.196-.323.196-.502 0-.41-.331-.747-.748-.747-.204 0-.405.082-.554.243l-5.453 5.962-3.298-2.938c-.144-.127-.321-.19-.499-.19-.415 0-.748.335-.748.746 0 .205.084.409.249.557z"
                            fill-rule="nonzero"
                        />
                    </svg>
                }
            />

Codesandbox

reference

https://tailwindcomponents.com/component/alert-messages