Skip to content

Instantly share code, notes, and snippets.

@erenkulaksiz
Last active May 2, 2022 12:09
Show Gist options
  • Save erenkulaksiz/7ad304f100f6d4807aae0730d3cfea83 to your computer and use it in GitHub Desktop.
Save erenkulaksiz/7ad304f100f6d4807aae0730d3cfea83 to your computer and use it in GitHub Desktop.
Tailwind React component builder
/**
* BuildComponent function makes it easy to build classes for custom components.
* @param {string} name - Name of the component.
* @param {string} defaultClasses - Default classes for the component.
* @param {string} extraClasses - Extra classes for the component.
* @param {array} conditionalClasses - Array of objects, which is conditional classes for the component.
* @param {array} selectedClasses - Array of strings, which is selected classes for the component.
* @returns {object} data - Object with the following properties:
* @returns {string} data.name - Name of the component.
* @returns {string} data.classes - Classes for the component.
*/
const BuildComponent = ({
name = "Default Component", // The component name we are going to built. eg: 'Button' - string
defaultClasses, // Default classes the component will recieve. 'bg-white' - string
extraClasses, // Extra classes that component recieve, e.g. button but blue - string
conditionalClasses = [], // The classes that component potentially recieve - array[object]
selectedClasses = [] // The selected classes that component has - array[string]
}) => {
let allClasses = ""; // set initial data. eg: 'bg-white'
if (defaultClasses) allClasses += defaultClasses;
if (extraClasses) allClasses += defaultClasses ? ` ${extraClasses}` : extraClasses; // add extra classes to the default classes
if (conditionalClasses.length > 0) {
// if we have conditional classes, we will have selected classes too.
selectedClasses.forEach((selectedClass, index) => {
if (conditionalClasses[index]) {
// if the selected class is in the conditional classes
if (conditionalClasses[index][selectedClass]) {
// if the selected class has a value, add it to the all classes
allClasses += ` ${conditionalClasses[index][selectedClass]}`;
} else {
if (conditionalClasses[index].default) {
// if the selected class has no value, add the default value to the all classes
allClasses += ` ${conditionalClasses[index].default}`;
}
}
}
});
}
return {
name,
classes: allClasses,
}
}
export default BuildComponent;
/**
const BuildButton = BuildComponent({
name: "Button",
defaultClasses: "cursor-pointer z-10 overflow-hidden hover:opacity-80 active:opacity-80 flex flex-row items-center p-4 py-2 relative active:scale-95 transition-all duration-75 text-white font-semibold text-sm",
extraClasses: className,
conditionalClasses: [
{
false: "w-auto",
true: "w-full"
},
{
default: rounded,
false: "rounded-xl",
true: "rounded-full"
},
{
true: "bg-gradient-to-r from-sky-600 to-violet-700"
},
{
default: size,
sm: "h-8",
lg: "h-12",
xl: "h-16",
},
{
default: light,
false: "bg-blue-600 hover:bg-blue-500 active:bg-blue-700 outline-none focus:outline-blue-500/50",//also remove ring
true: "bg-transparent hover:bg-transparent active:dark:bg-neutral-800/50 active:bg-neutral-200/50"
},
{
default: "focus:outline-2 " + ring,
true: "focus:outline-2",
}
],
selectedClasses: [
fullWidth,
rounded,
gradient,
size,
light,
ring,
]
});
*/
@erenkulaksiz
Copy link
Author

#TODO: remove push, split, filter and join array functions. we can add same functionality with strings instead of mapping arrays.

@erenkulaksiz
Copy link
Author

Done. Theres only one forEach function but i think its necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment