Registry / web-framework / styled-components-breakpoint

styled-components-breakpoint

library3.0.0-preview.20jsnpmunverified

styled-components-breakpoint provides utility functions for integrating responsive design breakpoints directly into styled-components using CSS-in-JS. Currently in a 3.0.0-preview.20 release, it offers two primary modes of operation: themeable mixins that leverage styled-components' ThemeProvider to define breakpoints globally, and static mixin factories for scenarios where breakpoints do not need to be dynamic or themed. The library simplifies the creation of media queries, allowing developers to define styles that adapt across different screen sizes (e.g., mobile, tablet, desktop) using an intuitive API like breakpoint('md'). It is designed to complement other related packages such as styled-components-spacing and styled-components-grid, promoting a consistent approach to responsive layouts within styled-components projects. While a formal release cadence isn't specified, its preview status indicates ongoing development towards a stable v3.

web-framework

npm install styled-components-breakpoint

github ↗package ↗

INSTALL

IMPORT

SIG · STYLED-COMPONENTS-

styled-components-breakpoint

web-frameworkjavascriptv3.0.0-preview.20

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

breakpoint

✓ import breakpoint from 'styled-components-breakpoint';

✗ const breakpoint = require('styled-components-breakpoint');

Primary default export for theme-driven media queries. This package primarily uses ESM.

map

✓ import { map } from 'styled-components-breakpoint';

✗ const { map } = require('styled-components-breakpoint');

Named export for theme-driven value mapping. Always use named import.

createBreakpoint, createMap

✓ import { createBreakpoint, createMap } from 'styled-components-breakpoint';

✗ const { createBreakpoint, createMap } = require('styled-components-breakpoint');

Named exports for creating static breakpoint utilities without relying on a ThemeProvider.

DefaultTheme (TypeScript augmentation)

✓ import { DefaultTheme } from 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { breakpoints: { [name: string]: number; }; } }

For TypeScript users, it is crucial to augment styled-components' DefaultTheme to include the 'breakpoints' property, ensuring type safety when accessing theme values.

Demonstrates how to set up `styled-components-breakpoint` with a `ThemeProvider` for custom breakpoints, applying responsive styles using the `breakpoint` mixin and mapping values with the `map` mixin.

import React from 'react'; import ReactDOM from 'react-dom/client'; import styled, { ThemeProvider } from 'styled-components'; import breakpoint, { map } from 'styled-components-breakpoint'; // Define a theme with custom breakpoints const theme = { breakpoints: { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, }, }; // Define a styled component using the breakpoint and map utilities const ResponsiveBox = styled.div` padding: 1rem; text-align: center; font-family: sans-serif; // Base style for all sizes background-color: lightblue; color: black; font-size: 14px; // Styles from 'md' breakpoint onwards ${breakpoint('md')` background-color: lightgreen; font-size: 18px; padding: 2rem; `} // Styles from 'lg' breakpoint onwards ${breakpoint('lg')` background-color: lightcoral; font-size: 22px; padding: 3rem; `} // Map colors based on breakpoints ${map( { xs: 'crimson', sm: 'darkblue', md: 'purple', lg: 'darkgreen', xl: 'black' }, color => `color: ${color};` )} `; function App() { return ( <ThemeProvider theme={theme}> <ResponsiveBox> <h1>Responsive Text Example</h1> <p> This box changes its background color, font size, padding, and text color based on the viewport width using styled-components-breakpoint. </p> <p>Try resizing your browser window!</p> </ResponsiveBox> </ThemeProvider> ); } const root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div')); root.render(<App />);

Debug

Known issues

breakingVersion 3.0.0-preview.20 is a pre-release version. APIs might change before the stable v3 release, and it may contain unresolved bugs. Use in production with caution.

fix

Monitor the official GitHub repository and changelog for stable releases and migration guides. Consider using v2 if stability is paramount.

affects: 3.0.0-preview.x

gotchaThe package's peer dependency for 'styled-components' is specified as '>= 1 <= 4'. While it might function with newer versions (like v5 or v6), this broad and outdated range does not guarantee full compatibility or support for all features of the latest styled-components versions. Potential unexpected behavior or missing functionality may arise.

fix

Thoroughly test `styled-components-breakpoint` with your specific `styled-components` version. Consider opening an issue on the GitHub repo if compatibility problems arise with newer styled-components versions not covered by the peer dependency.

affects: >=3.0.0-preview

gotchaFor TypeScript users, it is essential to augment the `styled-components` `DefaultTheme` interface to include the `breakpoints` property. Failure to do so will result in TypeScript errors when accessing theme properties or using the `breakpoint` and `map` utilities.

fix

Create a `styled.d.ts` file (or similar) and use declaration merging:
`import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { breakpoints: { [name: string]: number; }; } }`

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'breakpoints')

The `breakpoints` object is not defined in the `styled-components` theme when using the default `breakpoint` or `map` utilities.

fix

Wrap your component tree with `ThemeProvider` and pass a `theme` object containing a `breakpoints` property:
`import { ThemeProvider } from 'styled-components'; const theme = { breakpoints: { ... } }; <ThemeProvider theme={theme}>...</ThemeProvider>`

Property 'breakpoints' does not exist on type 'DefaultTheme'.

In TypeScript, the `DefaultTheme` interface has not been augmented to include the `breakpoints` property.

fix

Augment the `DefaultTheme` interface in a declaration file (e.g., `styled.d.ts`):
`import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { breakpoints: { [name: string]: number; }; } }`

ReferenceError: require is not defined

Attempting to use CommonJS `require()` syntax in an ESM-only context for `styled-components-breakpoint`.

fix

Switch to ESM `import` statements:
`import breakpoint, { map } from 'styled-components-breakpoint';`

Upgrade

Version history

3.0.0-preview.20latest on npm

Audit

Dependencies

styled-componentsrequiredCore styling library required for this utility. Note that peer dependency specifies '>=1 <=4', which is an older range. Modern styled-components (v5, v6) are generally compatible, but thorough testing is advised.

@types/styled-componentsoptionalTypeScript type definitions for styled-components, necessary for defining custom themes and leveraging type-safe theme properties.

Agent activity

9 hits · last 30 days

node

Resources

githubhttps://github.com/jameslnewell/styled-components-breakpoint ↗

packagehttps://www.npmjs.com/package/styled-components-breakpoint ↗