# cccisd-responsive

> Provides your component with responsive classes

Latest version **1.0.0** (published 2017-05-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install cccisd-responsive
pnpm add cccisd-responsive
yarn add cccisd-responsive
bun add cccisd-responsive
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2017-05-04 |
| First published | 2017-05-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Igor Eremeev |
| Maintainers | ieremeev |

## Links

- npm: https://www.npmjs.com/package/cccisd-responsive
- Repository: git@git.3cisd.corp:react-components/cccisd-responsive
- npm.io page: https://npm.io/package/cccisd-responsive

## Dependencies (1)

- [react-sizeme](https://npm.io/package/react-sizeme.md) ^2.3.1

## Recent versions

- 1.0.0 (latest) — 2017-05-04

## README

# 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

```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 (
            <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)<br>
Css module stylesheet

---
_Source: https://npm.io/package/cccisd-responsive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._