How to use terra-breakpoints - 7 common examples

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) {

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 });
      }

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 });
      }
    }
  }

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 });
      }
    }
  }

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 });
      }
    }
  }

}

    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 });
      }
    }
  }

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>