{"id":13670528,"url":"https://github.com/jameslnewell/styled-components-breakpoint","last_synced_at":"2025-05-16T12:03:48.093Z","repository":{"id":37735711,"uuid":"81250504","full_name":"jameslnewell/styled-components-breakpoint","owner":"jameslnewell","description":"Utility function for using breakpoints with styled-components 💅.","archived":false,"fork":false,"pushed_at":"2021-10-12T15:33:13.000Z","size":3617,"stargazers_count":243,"open_issues_count":15,"forks_count":17,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T05:54:36.309Z","etag":null,"topics":["breakpoint","breakpoints","media","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jameslnewell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-07T20:24:32.000Z","updated_at":"2024-08-08T09:10:59.000Z","dependencies_parsed_at":"2022-08-30T00:40:46.803Z","dependency_job_id":null,"html_url":"https://github.com/jameslnewell/styled-components-breakpoint","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/styled-components-breakpoint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994120,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoint","breakpoints","media","react","styled-components"],"created_at":"2024-08-02T09:00:44.406Z","updated_at":"2025-04-09T07:03:58.042Z","avatar_url":"https://github.com/jameslnewell.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# styled-components-breakpoint\n\n![npm](https://img.shields.io/npm/v/styled-components-breakpoint.svg) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/styled-components-breakpoint.svg) ![npm](https://img.shields.io/npm/dm/styled-components-breakpoint.svg) [![Build Status](https://travis-ci.org/jameslnewell/styled-components-breakpoint.svg?branch=master)](https://travis-ci.org/jameslnewell/styled-components-breakpoint)\n\nUtility functions for creating breakpoints in `styled-components` 💅.\n\n\u003e [Change log](https://github.com/jameslnewell/styled-components-breakpoint/blob/master/CHANGELOG.md)\n\n\u003e Have a look 👀 at [`styled-components-spacing`](https://github.com/jameslnewell/styled-components-spacing) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.\n\n## Installation\n\n```bash\nyarn add styled-components styled-components-breakpoint\n```\n    \n## Usage\n\n\u003e [Examples](https://jameslnewell.github.io/styled-components-breakpoint/)\n\n### Using the default breakpoints\n\n`./Heading.jsx`\n\n```js\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n\n  color: #444;\n  font-family: sans-serif;\n  \n  font-size: 12px;\n  \n  ${breakpoint('tablet')`\n    font-size: 16px;\n  `}\n  \n  ${breakpoint('desktop')`\n    font-size: 24px;\n  `}\n  \n`;\n\nexport default Heading;\n\n```\n\n`./index.jsx`\n\n```js\nimport React from 'react';\nimport Heading from './Heading';\n\n\u003cHeading\u003eHello World!\u003c/Heading\u003e\n\n```\n\n### Using custom breakpoints\n\nBreakpoints may be customised using `ThemeProvider`. For example, to use the same breakpoints as [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:\n\n`./Heading.jsx`\n```js\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nconst Heading = styled.h1`\n\n  color: #444;\n  font-family: sans-serif;\n  \n  ${breakpoint('sm')`\n    font-size: 12px;\n  `}\n  \n  ${breakpoint('md')`\n    font-size: 16px;\n  `}\n  \n  ${breakpoint('lg')`\n    font-size: 24px;\n  `}\n  \n`;\n\nexport default Heading;\n\n```\n\n`./index.jsx`\n\n```js\nimport React from 'react';\nimport {ThemeProvider} from 'styled-components';\n\nconst theme = {\n  breakpoints: { \n    xs: 0,\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200\n  }\n};\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cHeading\u003eHello World!\u003c/Heading\u003e\n\u003c/ThemeProvider\u003e\n\n```\n\n## API\n\n### `breakpoint(gte)`\n### `breakpoint(gte, lt)`\n\nWraps styles in a `@media` block.\n\n**Properties:**\n- `gte` - Required. A `string`. The name of the breakpoint from which the styles will apply.\n- `lt` - Optional. A `string`. The name of the breakpoint at which the styles will no longer apply.\n\n**Returns:**\n\nThe `@media` block.\n\n##### Example:\n```js\nimport styled from 'styled-components';\nimport breakpoint from 'styled-components-breakpoint';\n\nconst Thing = styled.div`\n\n  font-size: 12px;\n\n  ${breakpoint('tablet')`\n    font-size: 16px;\n  `};\n\n  ${breakpoint('desktop')`\n    font-size: 24px;\n  `};\n  \n`;\n\n\u003cThing/\u003e\n\n```\n\n##### Output:\n```css\n.cESAFm {\n  font-size: 12px;\n}\n\n@media (min-width: 46.0625em) {\n  .cESAFm {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  .cESAFm {\n    font-size: 24px;\n  }\n}\n```\n\n\n### `map(value, mapValueToCSS)`\n\nMaps values to styles in `@media` blocks.\n\n**Properties:**\n- `value` - Required. `{[string]: T}` or `T`. A map of values to breakpoint names.\n- `mapValueToCSS` - Required. `T =\u003e string`. A function to map a value to styles at the specified breakpoint.\n\n**Returns:**\n\nThe `@media` blocks.\n\n##### Example:\n\n```js\nimport styled from 'styled-components';\nimport {map} from 'styled-components-breakpoint';\n\nconst Thing = styled.div`\n  ${({size}) =\u003e map(size, val =\u003e `width: ${Math.round(val * 100)}%;`)}\n`;\n\n\u003cThing size={{mobile: 1, tablet: 1/2, desktop: 1/4}}/\u003e\n\n```\n\n##### Output:\n\n```css\n.cESAFm {\n  width: 100%;\n}\n\n@media (min-width: 46.0625em) {\n  .cESAFm {\n    width: 50%;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  .cESAFm {\n    width: 25%;\n  }\n}\n```\n\n### `createStatic()`\n### `createStatic(breakpoints)`\n\nCreates a static set of breakpoints which aren't themable.\n\n**Properties:**\n- `breakpoints` - Optional. `{[string]: number}`. A map of breakpoint names and sizes.\n\n**Returns:**\n\n- an `object` containing the breakpoints, the `breakpoint` and `map` functions\n\n##### Example:\n\n```js\nimport styled from 'styled-components';\nimport {createStatic} from 'styled-components-breakpoint';\n\nconst breakpoints = createStatic();\n\nconst Thing = styled.div`\n\n  font-size: 12px;\n\n  ${breakpoints.tablet`\n    font-size: 16px;\n  `};\n\n  ${breakpoints.desktop`\n    font-size: 24px;\n  `};\n  \n`;\n\n\u003cThing/\u003e\n\n```\n\n##### Output:\n\n```css\n.cESAFm {\n  font-size: 12px;\n}\n\n@media (min-width: 46.0625em) {\n  .cESAFm {\n    font-size: 16px;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  .cESAFm {\n    font-size: 24px;\n  }\n}\n```\n\n## Default breakpoints\n\nThe default breakpoints are:\n\n```js\n{\n    mobile: 0,      // targeting all devices\n    tablet: 737,    // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)\n    desktop: 1025   // targeting devices that are larger than the iPad (which is 1024px in landscape mode)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Fstyled-components-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-breakpoint/lists"}