useResponsiveValue won't use custom breakpoint names

[CLSnazel]

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:

Warning from createWithBreakpoints:

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

[hergaiety]

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

[hergaiety]

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;
};