cccisd-responsive

The problem with css media queries and bootstrap responsive classes is that they depends on the screen size. But most of the time we need to create responsive react component based on the container size (for example, the size of a sidebar).

cccisd-responsive provides you with the div wrapper where specific size class is applied.

Applied classes:

• size < 768px - xsmall
• size >= 768px and < 992px - small
• size >= 992px and < 1200px - medium
• size >= 1200px - large

You have to use cccisd-responsive along with a css module stylesheet

Installation

Run command:

npm install cccisd-responsive --save

Usage

style.css

.title {
    font-weight: bold;
}
 
.xsmall .title {
    font-size: 1em;
}
.small .title {
    font-size: 1.4em;
}
.medium .title {
    font-size: 2em;
}
.large .title {
    font-size: 3em;
}

index.js

import React from 'react';
import Responsive from 'cccisd-responsive';
import style from './style.css';
 
class MyComponent extends React.Component {
    render() {
        return (
            <Responsive cssModule={style}>
                <div className={style.title}>
                    Some title which changes the font-size depends on the container size
                </div>
            </Responsive>
        );
    }
}

Props

• cssModule - (type: object, default: null)
  Css module stylesheet