Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useResponsiveValue won't use custom breakpoint names #337

Open
CLSnazel opened this issue Apr 13, 2021 · 2 comments
Open

useResponsiveValue won't use custom breakpoint names #337

CLSnazel opened this issue Apr 13, 2021 · 2 comments

Comments

@CLSnazel
Copy link

When:

This issue came up in a react-static setup.

  1. clone this repository
  2. run the website with yarn start
  3. run cypress with yarn cypress open
  4. run the hook-components.js test (near the bottom of the list)
  5. the tests for BreakpointNumbers should fail

Current behavior:

BreakpointNumber, which uses useResponsiveValue, is always falling back to the default value of 0. It never uses the intended custom breakpoints names and values.

createWithBreakpoints is logging a warning in the console, saying that the custom breakpoint names are not found, and listing the default breakpoints as being available.

Expected behavior:

BreakpointNumber should show 0 on small screens, 1 on medium screens, 2 on large screens

Environment:

  • node version: 14.15.4
  • npm version: 7.6.0
  • atomic-layout version: ^0.16.2

Current Pointers:

Console logging inside of the Layout.configure and createWithBreakpoints functions have shown that createWithBreakpoints is being called before Layout.configure, therefore it uses the default breakpoints. After Layout.configure is called, createWithBreakpoints and useResponsiveValue do not receive the latest breakpoint objects.

Screenshots:

The console logging output, showing createWithBreakpoints before Layout.configure:

image

Warning from createWithBreakpoints:

image

Visuals from cypress, showing the responsive value always at the default of 0:

image
image
image

@hergaiety
Copy link

I believe I just ran into this today, came here to see if it happened for others. +1

@hergaiety
Copy link

hergaiety commented Jul 1, 2021

As a workaround, I wrote this hook for myself, it has the same API as the one that isn't working currently:

import { useState } from 'react';
import Layout, { useViewportChange } from 'atomic-layout';

export default ({ to, from }) => {
  const [matches, setMatches] = useState(false);

  useViewportChange(() => {
    setMatches(
      (typeof to === 'undefined' ||
        window.innerWidth < Layout.breakpoints[to].maxWidth) &&
        (typeof from === 'undefined' ||
          window.innerWidth > Layout.breakpoints[from].minWidth)
    );
  });

  return matches;
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants