WithBreakpoint

Usage

Provides the current breakpoint; based on the viewport size.

Examples

Current breakpoint is:

lg

<WithBreakpoint>
    {breakpoint => (
      <div>
        Current breakpoint is:
        <div>
          <strong>{breakpoint}
        </div>
      </div>
    )}
  </WithBreakpoint>
</Playground>

Breakpoint Utilities

Functions that aid in determining if a provided breakpoint is equal to or above/below a target breakpoint.

Current breakpoint above md: true

Current breakpoint below md: false

<WithBreakpoint>
    {breakpoint => (
      <div>
        <p>
          Current breakpoint above md:{' '}
          <strong>{isBreakpointUp('md', breakpoint).toString()}
        </p>
        <p>
          Current breakpoint below md:{' '}
          <strong>{isBreakpointDown('md', breakpoint).toString()}</strong>
        </p>
      </div>
    )}
  </WithBreakpoint>
</Playground>

Component API

Theme API