npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

styled-breakpoints

v14.1.4

Published

Simple and powerful css breakpoints for styled-components and emotion

Downloads

62,417

Readme

🌼 Preview

Inside components.

const Box = styled.div`
  background-color: pink;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    background-color: hotpink;
  }

  ${({ theme }) => theme.breakpoints.up('md')} {
    background-color: red;
  }
`;

Outside components.

import { useTheme } from 'styled-components'; // or '@emotion/react'

const Layout = () => {
  const { up } = useTheme().breakpoints;
  const isMd = useMediaQuery(up('md'));

  return <>{isMd && <Box />}</>;
};

Examples

👉🏻 Mobile First

From smallest to largest

👉🏻 Desktop First

From largest to smallest

👉🏻 Hooks API

📖 Documentation

🧐 Core concepts

  • Breakpoints act as the fundamental elements of responsive design. They enable you to control when your layout can adapt to a specific viewport or device size.

  • Utilize media queries to structure your CSS based on breakpoints. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is min-width.

  • The objective is mobile-first, responsive design. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.

Getting Started

🚩 Installation

npm install styled-breakpoints@latest

# or

yarn add styled-breakpoints@latest

Configuration

🚩 File Structure

 theme/
 ├── index.ts
 └── styled.d.ts // or emotion.d.ts
 app.tsx

🚩 Available breakpoints

Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be customized.

const breakpoints = {
  xs: '0px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1400px',
};

Each breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.

🚩 Default Configuration

theme/index.ts

import { createStyledBreakpointsTheme } from 'styled-breakpoints';

export const theme = createStyledBreakpointsTheme();

Customization

🚩 Breakpoints

theme/index.ts

import { createStyledBreakpointsTheme } from 'styled-breakpoints';

export const theme = createStyledBreakpointsTheme({
  breakpoints: {
    small: '100px',
    medium: '200px',
    large: '300px',
    xLarge: '400px',
    xxLarge: '500px',
  },
});
🎨 Merge with Another Theme

theme/index.ts

import { createStyledBreakpointsTheme } from 'styled-breakpoints';

export const primaryTheme = {
  fonts: ['sans-serif', 'Roboto'],
  fontSizes: {
    small: '1em',
    medium: '2em',
    large: '3em',
  },
} as const;

export const theme = {
  ...primaryTheme,
  ...createStyledBreakpointsTheme(),
};
🚩 Installation
npm install styled-components

# or

yarn add styled-components

theme/styled.d.ts

import 'styled-components';
import { theme } from './index';

type ThemeConfig = typeof theme;

declare module 'styled-components' {
  export interface DefaultTheme extends ThemeConfig {}
}
🚩 Installation
npm install @emotion/{styled,react}

# or

yarn add @emotion/{styled,react}

theme/emotion.d.ts

import '@emotion/react';
import { theme } from './index';

type ThemeConfig = typeof theme;

declare module '@emotion/react' {
  export interface Theme extends ThemeConfig {}
}

🚀 Integration to Your App

app.tsx

import styled { ThemeProvider } from 'styled-components'; // or '@emotion/react'
import { theme } from './theme';

const Box = styled.div`
  display: none;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: block;
  }
`;

const App = () => (
  <ThemeProvider theme={theme}>
    <Box />
  </ThemeProvider>
);

Media queries API

🚀 Caching is implemented in all functions to optimize performance.

👉🏻 Min-width - up

const Box = styled.div`
  display: none;

  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: block;
  }
`;
@media (min-width: 768px) {
  display: block;
}

👉🏻 Max-width - down

We occasionally use media queries that go in the other direction (the given screen size or smaller):

const Box = styled.div`
  display: block;

  ${({ theme }) => theme.breakpoints.down('md')} {
    display: none;
  }
`;
@media (max-width: 767.98px) {
  display: none;
}

Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.

👉🏻 Single breakpoint - only

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

const Box = styled.div`
  background-color: pink;

  ${({ theme }) => theme.breakpoints.only('md')} {
    background-color: rebeccapurple;
  }
`;
@media (min-width: 768px) and (max-width: 991.98px) {
  background-color: rebeccapurple;
}

👉🏻 Breakpoints range - between

Similarly, media queries may span multiple breakpoint widths.

const Box = styled.div`
  background-color: gold;

  ${({ theme }) => theme.breakpoints.between('md', 'xl')} {
    background-color: rebeccapurple;
  }
`;
@media (min-width: 768px) and (max-width: 1199.98px) {
  background-color: rebeccapurple;
}

👉🏻 useMediaQuery hook

features:

  • 🧐 optimal performance by dynamically monitoring document changes in media queries.
  • 💪🏻 It supports SSR (server-side rendering).
  • 📦 Minified and gzipped size 284b.
 declare function useMediaQuery(query: string) => boolean
import { useTheme } from 'styled-components'; // or from '@emotion/react'
import { useMediaQuery } from 'styled-breakpoints/use-media-query';
import { Box } from 'third-party-library';

const SomeComponent = () => {
  const { only } = useTheme().breakpoints;
  const isMd = useMediaQuery(only('md'));

  return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
};

License

MIT License

Copyright (c) 2018-2024 Maxim Alyoshin.

This project is licensed under the MIT License - see the LICENSE file for details.

Contributors