@ayro-technologies/react-styled-viewport NPM

React styled viewport helper

Consistent approach to media queries for your StyledComponents and React Components ✨

Features

Define own breakpoints
Use it in your styled components:
- Via Helper:
- Via Higher Order Component's props:
End to End Example:

import React, { Component } from 'react';
import { withViewport, viewport } from '@ayro-technologies/react-styled-viewport';

const breakpoints = {
    mobile: 450,
    tablet: 768,
    desktop: 1020,
    largeDesktop: 1600
};

const media = viewport(breakpoints).styled();

const ResponsiveButton = styled.button`
${media.largeDesktop`font-size:60px;`}
${media.desktop`font-size:40px;`}
${media.tablet`font-size:20px;`}
${media.mobile`font-size:10px;`}

${media.lessThan(500)`background-color: blue;`}
${media.greaterThan(700)`background-color: red;`}
${media.between(500, 700)`background-color: green;`}
`;

class Example extends Component {
  render() {
    return (
      <React.Fragment>
        <h1 style={{fontSize: this.props.viewport.isMobile() ? '16px': '30px' }}>Hello world</h1>
        {this.props.viewport.match(455) && <button>Only on 455 pixels</button>}
        {this.props.viewport.between(500, 800) && <button>Between 500 and 800 pixels</button>}
        {this.props.viewport.lessThan(800) && <button>Less than 800 px</button>}
        {this.props.viewport.greaterThan(800) && <button>Greater than 800 px</button>}
        <ResponsiveButton>Responsive via styled helper</ResponsiveButton>
      </React.Fragment>
    )
  }
}

export default withViewport(Example, breakpoints);

Installation

Install the package:

npm i @ayro-technologies/react-styled-viewport --save

Import the dependencies:

import { withViewport, viewport } from '@ayro-technologies/react-styled-viewport';

Define your breakpoints:

const breakpoints = {
    mobile: 450,
    tablet: 768,
    desktop: 1020,
    largeDesktop: 1600
};

Use it for your Styled Components via the helper or via HoC (passing in custom breakpoints):
- Styled Components helper:
```
const media = viewport(breakpoints).styled();
```
- HoC:
```
export default withViewport(YourComponent, breakpoints);
```