Provides your component with responsive classes
npm install cccisd-responsiveThe 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
Run command:
npm install cccisd-responsive --save
style.css
`sass
.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
`js
import React from 'react';
import Responsive from 'cccisd-responsive';
import style from './style.css';
class MyComponent extends React.Component {
render() {
return (
Some title which changes the font-size depends on the container size
);
}
}
``
* cssModule - (type: object, default: null)
Css module stylesheet