How to use bpk-component-breakpoint - 10 common examples

};

    const sidebar = (
      
    );

    return (
      <section>
        
          {isTablet =&gt;
            isTablet ? (
              
                  document.getElementById('pagewrap')
                }
                renderTarget={() =&gt; document.getElementById('portal-target')}
                className={getClassName('bpkdocs-side-nav-layout__modal')}
                contentClassName={getClassName(
                  'bpkdocs-side-nav-layout__modal-content',
                )}</section>

isActive: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};

const components = [
  {
    id: 'default',
    title: 'Default',
    examples: [
      <div>
        
          {isActive =&gt; (
            MOBILE
          )}
        
        
          {isActive =&gt; (
            TABLET
          )}
        
        
          {isActive =&gt; (
            TABLET ONLY
          )}
        
        
          {isActive =&gt; (
            
              ABOVE MOBILE
            
          )}
        </div>

};

    const sidebar = (
      
    );

    return (
      <section>
        
          {isTablet =&gt;
            isTablet ? (
              
                  document.getElementById('application-container')
                }
                renderTarget={() =&gt; document.getElementById('portal-target')}
                className={getClassName('bpkdocs-side-nav-layout__modal')}
                contentClassName={getClassName(
                  'bpkdocs-side-nav-layout__modal-content',
                )}</section>

{Object.keys(omitActiveSection(activeSection)).map(section => (
            
              {isTablet => (
                 onSectionChange(section)}
                />
              )}
            
          ))}

export default (props: Props) => {
  const {
    activeSection,
    links,
    sectionListExpanded,
    onMobileModalClose,
    onMenuToggle,
    onSectionChange,
  } = props;

  return (
    <nav>
      <div>
        
          {isTablet =&gt;
            isTablet &amp;&amp; (
              
            )
          }
        
        
          <img alt="Backpack Logo" src="{`/${BackpackLogoWhite}`}"></div></nav>

export default (props: Props) => {
  const {
    activeSection,
    links,
    sectionListExpanded,
    onMobileModalClose,
    onMenuToggle,
    onSectionChange,
  } = props;

  return (
    <nav>
      <div>
        
          {isTablet =&gt;
            isTablet &amp;&amp; (
              
            )
          }
        
        
          <img alt="Backpack Logo" src="{`/${BackpackLogoWhite}`}"></div></nav>

TABLET
          )}
        
        
          {isActive => (
            TABLET ONLY
          )}
        
        
          {isActive => (
            
              ABOVE MOBILE
            
          )}
        
        
          {isActive => (
            
              ABOVE TABLET
            
          )}
        
      ,
    ],
  },
];

const blurb = [
  
    The breakpoint component allows information to be displayed in different
    ways depending on the screen size. To simplify things, Backpack uses only
    three breakpoints optimised for mobile, tablet and desktop viewports.

}
  }

  const heroClassNames = getClassName(
    'bpkdocs-main-hero-image',
    !heroImage && 'bpkdocs-main-hero-image--collapsed',
  );

  const hamburgerMenuClassNames = getClassName(
    'bpkdocs-main-hero-image__hamburger',
    !heroImage && 'bpkdocs-main-hero-image__hamburger--hero-collapsed',
  );

  return (
    <div style="{heroStyle}">
      
        {aboveTablet =&gt;
          !aboveTablet &amp;&amp; (
            
          )
        }
      
    </div>
  );
};

return <div>{props.children}</div>;
};

MediaQueryStatus.propTypes = {
  isActive: PropTypes.bool.isRequired,
  children: PropTypes.node.isRequired,
};

const components = [
  {
    id: 'default',
    title: 'Default',
    examples: [
      <div>
        
          {isActive =&gt; (
            MOBILE
          )}
        
        
          {isActive =&gt; (
            TABLET
          )}
        
        
          {isActive =&gt; (
            TABLET ONLY
          )}
        
        
          {isActive =&gt; (</div>

formatMonth,
      markOutsideDays,
      markToday,
      maxDate,
      minDate,
      onDateSelect: this.handleDateSelect,
      onMonthChange,
      showWeekendSeparator,
      weekStartsOn,
      initiallyFocusedDate,
    };

    const calendar = ;

    return (
      
        {isMobile =>
          isMobile ? (
            
              {calendar}
            
          ) : (