bpk-component-breakpoint-css

v2.0.96
Backpack breakpoint component.

bpk-component-breakpoint

Backpack breakpoint component.

Installation

npm install bpk-component-breakpoint --save-dev

Usage

import React from 'react';
import BpkBreakpoint, { BREAKPOINTS } from 'bpk-component-breakpoint';

export default () => (
  <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
    {isActive => (isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
  </BpkBreakpoint>

  <BpkBreakpoint query={BREAKPOINTS.TABLET}>
    <span>Tablet viewport is active</span>
  </BpkBreakpoint>
);

Props

Property PropType Required Default Value
children oneOfType(node, func) true -
query oneOf(BREAKPOINTS) true -
legacy bool false false

Metadata

  • Apache-2.0
  • Whatever
  • Backpack Design System
  • released 12/10/2020

Downloads