Skip to content

Instantly share code, notes, and snippets.

@luismartinezs
Last active August 2, 2022 10:52
Show Gist options
  • Save luismartinezs/8647adca8484f27cb759e80ba030b720 to your computer and use it in GitHub Desktop.
Save luismartinezs/8647adca8484f27cb759e80ba030b720 to your computer and use it in GitHub Desktop.
React Width Wrapper #react
export interface IWidthWrapperProps {
children: React.ReactNode;
className?: string;
width?: "text" | "block";
}
// width wrapper component with tailwindCSS
// use it to standardize content width across your app
import type { IWidthWrapperProps } from "./WidthWrapper.props";
const WidthWrapper: React.FC<IWidthWrapperProps> = ({
children,
className = "",
width = "block",
}): JSX.Element => {
const baseClass = "h-full mx-auto width-wrapper";
const widthClass = () => {
let _widthClass = "";
const widthMap = {
text: "max-w-prose",
block: "max-w-5xl",
};
_widthClass = widthMap[width];
const paddingMap = {
text: "px-4 sm:px-6 md:px-0",
block: "px-10 sm:px-6 lg:px-8",
};
_widthClass += ` ${paddingMap[width]}`;
return _widthClass;
};
const classes = `${baseClass} ${widthClass()} ${className}`;
return <div className={classes}>{children}</div>;
};
export default WidthWrapper;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment