@dash-ui/mq

;
`

API

$3

A factory function that creates a utility for adding breakpoints and
media queries to Dash styles.

#### Example

Check out an example on CodeSandbox

`tsx
import mq from "@dash-ui/mq";
import { styles } from "@dash-ui/styles";

// Creates the stored media queries
const breakpoint = mq(styles, {
sm: "only screen and (min-width: 0em)",
mq: "only screen and (min-width: 35em)",
lg: "only screen and (min-width: 80em)",
});

// Can be used as a shortcut for @media ...
const boxOne = styles.one
width: 200px;
height: 200px;

/**
* This box will be 400x400 when "md" breakpoint matches
*/
${breakpoint("md")} {
width: 400px;
height: 400px;
}
;

// Can be used like a style mapping
const boxTwo = styles.one(
breakpoint({
// This box will always have a primary color background
default: ({ color }) => ({
backgroundColor: color.primary,
}),
// This box will be 100x100 when sm media query is matched
sm: {
width: 100,
height: 100,
},
// This box will be 200x200 when md media query is matched
md:
width: 200px;
height: 200px;
,
// This box will be 400x400 when lg media query is matched
lg:
width: 400px;
height: 400px
,
})
);

const Component = () => (