BreakpointListener

[Ayc0]

<BreakpointListener on="sm mdUp xsDown">
  {breakpoint => (
    <div>{breakpoint}</div>
  )}
</BreakpointListener>

In this example, breakpoint can only be 'sm', 'mdUp' or 'xsDown'

if two intervals are intersecting, it should throw an error

[Ayc0]

V2:

<BreakpointsConsumer on="sm mdUp xsDown">
  {({ sm, mdUp, xsDown }) => (
    <div>{sm && 'sm'}</div>
    <div>{mdUp && 'mdUp'}</div>
    <div>{xsDown && 'xsDown'}</div>
  )}
</BreakpointsConsumer>

and the react 16.7 hook version:

const App = () => {
  const { sm, mdUp, xsDown } = useBreakpoints();
  return (
    <div>{sm && 'sm'}</div>
    <div>{mdUp && 'mdUp'}</div>
    <div>{xsDown && 'xsDown'}</div>
  )
}

• [ ] BreakpointsConsumer
• [ ] useBreakpoints

[Ayc0]

Solved with useOnly