How to use the terra-breakpoints.activeBreakpointForSize function in terra-breakpoints

To help you get started, we’ve selected a few terra-breakpoints examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
const {
      onChange,
      onResize,
      tiny,
      small,
      medium,
      large,
      huge,
      enormous,
    } = this.props;

    if (onResize) {
      onResize(width);
    }

    const activeBreakpoint = activeBreakpointForSize(width);
    if (onChange && activeBreakpoint !== this.breakpoint) {
      onChange(activeBreakpoint);
    }

    this.breakpoint = activeBreakpoint;

    // Only update the state if an uncontrolled component exists.
    if (tiny || small || medium || large || huge || enormous) {
      let element;
      if (width >= breakpoints.enormous && enormous) {
        element = 'enormous';
      } else if (width >= breakpoints.huge && huge) {
        element = 'huge';
      } else if (width >= breakpoints.large && large) {
        element = 'large';
      } else if (width >= breakpoints.medium && medium) {

terra-breakpoints

Contains components and utilities related to Terra's supported responsive breakpoints

Apache-2.0
Latest version published 7 months ago

Package Health Score

57 / 100
Full package analysis