Ecme - The Ultimate Next & TypeScript Web Template

useRandomBgColor

useRandomBgColor hook generates a random background color from a predefined whitelist of Tailwind CSS colors based on the input name. This hook is useful for assigning consistent background colors based on a string, such as a username or item name.

Example

import useRandomBgColor from '@/utils/hooks/useRandomBgColor';

const Example = ({ name }: { name: string }) => {
    const getBgColor = useRandomBgColor();

    return (
        <div className={getBgColor(name)}>
            {name}
        </div>
    );
};

export default Example

return	Description	Type	Default
generateBgColor	Returns a Tailwind CSS background color class based on the input name string.	`(name: string) => string`

TABLE OF CONTENT

Example