https://github.com/dash-ui/mq
A utility function for adding reusable media queries and breakpoints to @dash-ui styles
https://github.com/dash-ui/mq
breakpoints dash dash-ui media-queries
Last synced: about 2 months ago
JSON representation
A utility function for adding reusable media queries and breakpoints to @dash-ui styles
- Host: GitHub
- URL: https://github.com/dash-ui/mq
- Owner: dash-ui
- License: mit
- Created: 2020-01-17T02:17:17.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-10-17T09:31:00.000Z (over 2 years ago)
- Last Synced: 2025-10-10T03:08:27.206Z (8 months ago)
- Topics: breakpoints, dash, dash-ui, media-queries
- Language: TypeScript
- Homepage:
- Size: 1.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
> A utility function for adding reusable media queries and breakpoints to @dash-ui styles
```sh
npm i @dash-ui/mq
```
---
## Quick start
[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uimq-example-sdol5?file=/src/App.tsx)
```js
import mq from "@dash-ui/mq";
import { styles } from "@dash-ui/styles";
const breakpoint = mq(styles, {
// 0px
sm: "only screen and (min-width: 0em)",
// 560px
mq: "only screen and (min-width: 35em)",
// 1280px
lg: "only screen and (min-width: 80em)",
});
const box = styles.one(
breakpoint({
sm: ({ color }) => ({
width: 100,
height: 100,
backgroundColor: color.primary,
}),
md: ({ color }) => ({
width: 200,
height: 200,
backgroundColor: color.primary,
}),
lg: ({ color }) => ({
width: 400,
height: 400,
backgroundColor: color.primary,
}),
})
);
export const Component = () =>
;
```
## API
### mq()
A factory function that creates a utility for adding breakpoints and
media queries to Dash styles.
#### Example
[Check out an example on **CodeSandbox**](https://codesandbox.io/s/dash-uimq-example-sdol5?file=/src/App.tsx)
```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 = () => (
);
```
#### Arguments
```typescript
function mq<
Tokens extends DashTokens = DashTokens,
Themes extends DashThemes = DashThemes,
QueryNames extends string = string
>(
styles: Styles,
mediaQueries: MediaQueries
): {
(queryName: QueryNames): string;
(queryName: MediaQueryObject): string;
};
```
| Argument | Type | Required? | Description |
| ------------ | -------------------------------------- | --------- | ------------------------------------- |
| styles | `styles` | Yes | A Dash `styles` instance |
| mediaQueries | `{readonly [K in QueryNames]: string}` | Yes | A map of media query name/query pairs |
#### Returns
```typescript
// When a `string` is provided as the `mediaQueries` argument, this
// will return a `MediaQueryNameCallback`, otherwise a `MediaQueryCssCallback`
function mqStyles(queryName: QueryNames): string;
function mqStyles(
queryName: MediaQueryObject
): string;
```
## LICENSE
MIT