react-responsive-styled/README.md

Small addition to Styled Components which allows easier Responsive Components and smaller bundle

## 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

1. import the ResponsiveComponent
2. 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

```js
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)
```js
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. 

## License

MIT © yairniz