styled-components responsive mixin

styled-components.txt

/*
This mixin exposes 4 params that allows 
you to create any type of media query

@param1: first breakpoint [400px, 800px, etc]
@param2 (optional): type [min, max]
@param3 (optional): orientation [width, height]
@param4 (optional): second breakpoint [1200px, 1600px, etc]
*/

const theme = {
	breakpoints: {
		xs: "480px",
		sm: "768px",
		md: "992px",
		lg: "1200px",
		xl: "1600px",
		xxl: "2000px",
		uhd: "3000px",
	},
	responsive: (
		breakpoint: string,
		type: string = "min",
		orientation: string = "width",
		breakpoint2: string = ""
	) =>
		`@media (${type === "max" ? "max" : "min"}-${orientation}: ${breakpoint}) ${
		type === "between" ? `and (max-${orientation}: ${breakpoint2})` : ""
	} `,
};

/* Use like this: */

export const Container = styled.div(
	({ theme }) => `
		background-color: red;

		${theme.responsive(theme.breakpoints.md, "max", "height")} {
			background-color: green;
		}
	${theme.responsive(theme.breakpoints.sm, "min", "width", theme.breakpoits.md)} {
		background-color: blue;
	}
	${theme.responsive(theme.breakpoints.uhd)} {
		background-color: cyan;
	content: "I am UHD"
	}
	`
);