Custom breakpoints passed directly to core methods (up, down, between)

[WiktorG]

Important!

Leave your opinion on this topic in the issue :)

Problem

Many projects don't have dedicated UI/UX Designer to create views for all popular devices (mobile, desktop, tablet, etc.) and we are forced to tweak our designs with our own eye. Especially in the era of fold and tablet split screen when they can be even 280px wide.

Library provides almost full functionality we need to make our apps fully-responsive, but I find there is lack of the possibility to pass fully custom breakpoint by it's number.

In my projects I had to create very custom sliders with many @media-query adjustments.
Even to the point where one class had about 10 media queries.

I wish there was such possibility, because every project has it's own edge cases.

Creating very custom theme configuration object is one option, but it can lead to some other issues - for example naming.
I've seen projects with breakpoints called like small, smaller, smallest, small laptop because the solution they were using didn't provide a possibility to use custom breakpoint.

To my way of thinking - those weird names are way worse than using number number directly.

So I created PR which adds the possibility to provide number directly to the core methods of the library. I've tested it both with hooks and CSS-in-JS and it works 😅

Example

Note: it doesn't work with only method, because it wouldn't make any sense. It shows proper error instead :)

Here is a little demo of my implementation:
https://github.com/WiktorG/styled-custom-breakpoints-demo

import styled from "styled-components"

import { up, down, only, between } from 'styled-breakpoints'
import { useBreakpoint } from "styled-breakpoints/react-styled"

const Wrapper = styled.div`
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
`

const Heading = styled.h1`
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12px;
  ${up(1011)} {
    font-size: 35px;
  }
`

export const useBreakpoints = () => {
  const isXs = useBreakpoint(down("xs"));
  const isSm = useBreakpoint(only("sm"));
  const isMd = useBreakpoint(only("md"));
  const isLg = useBreakpoint(only("lg"));
  const isXl = useBreakpoint(up("xl"));
  const isCustom = useBreakpoint(up(1200));
  const isCustomBetween = useBreakpoint(between(1000, 1200));

  return {
    isXs,
    isSm,
    isMd,
    isLg,
    isXl,
    isCustom,
    isCustomBetween
  };
};


function Test() {
  const { isXs, isSm, isMd, isLg, isXl, isCustom, isCustomBetween } = useBreakpoints();

  return (
  <ul>
    <li>isXs: {`${isXs}`}</li>
    <li>isSm: {`${isSm}`}</li>
    <li>isMd: {`${isMd}`}</li>
    <li>isLg: {`${isLg}`}</li>
    <li>isXl: {`${isXl}`}</li>
    <li>isCustom up 1200: {`${isCustom}`}</li>
    <li>isBetween 1000 & 1200: {`${isCustomBetween}`}</li>
  </ul>
  )
}

function App() {
  return (
    <Wrapper>
      <Heading>Hello from custom styled breakpoints</Heading>
      <Test />
    </Wrapper>
  );
}

export default App;

PR

Here is my pull request #1074 - the Readme is yet to be updated.