react-responsive-styled

Solution

Allows easy media queries per css attribute

Enables printing of styles relevant only for your screen size (without media queries)

Dependencies

ReactJS and Styled Components

How To

import the ResponsiveComponent
Render the component with props:

commonCss - A string with the common definition used for any screen size in the same manner as Styled-Components work.

responsiveSet - An array of objects, each object must contain an attribute and base value.
```
 The attribute is pure css as string, ex.: 'font-size'
 The base and other values are css values in string, ex: '24px' 
```
tagName - Defaults to 'div', may use any html tag or React component.

Example

import React from 'react'

import { ResponsiveComponent } from 'react-responsive-styled';

export default class ResonsiveFont extends React.Component {

  static commonCss = `
    color: #88a;
  `;

  static fontSet = [{
    attribute: 'font-size',
    base: '24px',
    tablet: '36px',
    laptop: '48px',
    huge: '60px'
  }, {
    attribute: 'font-weight',
    base: 'bold',
    1024: 'normal'
  }];

  render() {
    const resProps = {
      commonCss: ResonsiveFont.commonCss,
      responsiveSet: ResonsiveFont.fontSet
    };

    return (<ResponsiveComponent { ...resProps }>
      Responsive Font
    </ResponsiveComponent>);
  }
}

For each css attribute the defining object must include the attribute and base.

Then add screen width breakpoints for that attribute by the predefined sizes: mobileBig, tablet, laptop or desktop, numeric sizes or added configured sizes as mentioned below.

Configuration (optional)

import { ResponsiveWrapper } from 'react-responsive-styled';

const responsiveProps = {
  options: {
    mediaSizes: {
      huge: 1440
    },
    mediaQueries: {
      huge: '@media (min-width: 1440px)'
    },
    printCurrent: true
  }
};

render() {

  return (
    <ResponsiveWrapper { ...responsiveProps }>
      <App />
    </ResponsiveWrapper>
  );
}

printCurrent - Would only print the styles for the current screen width and not all the media queries. It must have proper min-sizes (or preconfigured queries) to serve as minimum width queries.