How to use terra-breakpoints - 7 common examples

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) {
github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
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) {
        element = 'medium';
      } else if (width >= breakpoints.small && small) {
        element = 'small';
      } else {
        element = 'tiny';
      }

      if (this.state.element !== element) {
        this.setState({ element });
      }
github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
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) {
        element = 'medium';
      } else if (width >= breakpoints.small && small) {
        element = 'small';
      } else {
        element = 'tiny';
      }

      if (this.state.element !== element) {
        this.setState({ element });
      }
    }
  }
github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
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) {
        element = 'medium';
      } else if (width >= breakpoints.small && small) {
        element = 'small';
      } else {
        element = 'tiny';
      }

      if (this.state.element !== element) {
        this.setState({ element });
      }
    }
  }
github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
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) {
        element = 'medium';
      } else if (width >= breakpoints.small && small) {
        element = 'small';
      } else {
        element = 'tiny';
      }

      if (this.state.element !== element) {
        this.setState({ element });
      }
    }
  }
github cerner / terra-core / packages / terra-responsive-element / src / ResponsiveElement.jsx View on Github external
}

    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) {
        element = 'medium';
      } else if (width >= breakpoints.small && small) {
        element = 'small';
      } else {
        element = 'tiny';
      }

      if (this.state.element !== element) {
        this.setState({ element });
      }
    }
  }
github cerner / terra-core / packages / terra-breakpoints / src / terra-dev-site / doc / example / ActiveBreakpointProviderExample.jsx View on Github external
import React from 'react';
import { ActiveBreakpointProvider, withActiveBreakpoint, ActiveBreakpointContext } from 'terra-breakpoints';

const ActiveBreakpointConsumer1 = withActiveBreakpoint(({ activeBreakpoint }) => (
  <div>
    <p>This component uses the withActiveBreakpoint() component generator to interface with the ActiveBreakpointProvider.</p>
    <p>
      The active breakpoint is:
      {' '}
      {activeBreakpoint}
    </p>
  </div>
));

const ActiveBreakpointConsumer2 = () =&gt; (
  
    {
      activeBreakpoint =&gt; (
        <div>
          <p>This component interfaces with the ActiveBreakpointContext directly.</p></div>

terra-breakpoints

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

Apache-2.0
Latest version published 1 month ago

Package Health Score

88 / 100
Full package analysis