UseClassnames

Description

This hook is used to create a phrase of classnames dynamically

Example

In this example i will use tailwind which is class based

import { useClassnames } from '@oneforx/poseidon'

// Array
const MyRedButton = () => {
   const buttonCns = useClassnames(["border-1", "border-red-400", "bg-red-500", "rounded", "text-white", "font-bold" ]);
   return (
       <button className={buttonCns}>My red button</button>
   );
}

// Object
const MyRedButton = () => {
   const [ disabled, setDisabled ] = useState(false);
   const buttonCns = useClassnames({
       "border-1": true,
       "border-red-400": true,
       "bg-red-500": true,
       "rounded": true,
       "disabled": disabled, // here when disabled will be false, disabled will not be part of the final result
       "text-white": true,
       "font-bold": true
   });
   return (
       <button className={buttonCns}>My red button</button>
   );
}