react-styled-responsive-toolkit v1.0.13

React Styled Components Responsive Toolkit

This toolkit does nothing more then bundle some useful tools together.

It contains:

• styled-components-breakpoint
• react-break
• hedron

Usage:

import statement:

#!javascript

import { LgCSS, Xs, Lg } from 'react-styled-responsive-toolkit';

Then use it in your styled-components or within your JSX Code:

#!javascript

const Wrapper = styled.div`
    background-color: blue;
    ${LgCSS`
      background-color: red;      
    `}
`;


function Box(props) {
  return (
    <Wrapper>
      <Lg>
        We are on Desktop
      </Lg>
      <Xs>
        We are on Mobile
      </Xs>
    </Wrapper>
  );
}

IMPORTANT: XsCSS exists but should not be used regularly as we are building mobile first. It just exists for some edge cases.