@entria/responsiveness

Responsive style tools for ReactJS

Stats

StarsIssuesVersionUpdatedCreatedSize
@entria/responsiveness
1521.0.34 years ago4 years agoMinified + gzip package size for @entria/responsiveness in KB

Readme

Responsiveness

Responsive style tools for ReactJS

Demo

Install

npm i @entria/responsiveness --save
yarn add @entria/responsiveness

Usage

You can define the sizes with their specifics props (small, medium, large).

import React from 'react';
import { Grid } from '@entria/responsiveness';

const Example = () => (
  <Grid.Row>
    <Grid.Col large={3} medium={6}>1</Grid.Col>
    <Grid.Col large={3} medium={6}>2</Grid.Col>
    <Grid.Col large={3} medium={6}>3</Grid.Col>
    <Grid.Col large={3} medium={6}>4</Grid.Col>
  </Grid.Row>
);

export default Example;

Or with the sizes prop (The parameters is from smaller to greater breakpoints).

import React from 'react';
import { Grid } from '@entria/responsiveness';

const Example = () => (
  <Grid.Row>
    <Grid.Col sizes={[12, 6, 3]}>1</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>2</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>3</Grid.Col>
    <Grid.Col sizes={[12, 6, 3]}>4</Grid.Col>
  </Grid.Row>
);

export default Example;

Grid.Col props

  • cols: number of columns (default: 12)
  • large: size of the column on large devices (default: 12)
  • medium: size of the column on medium devices (default: 12)
  • small: size of the column on small devices (default: 12)
  • sizes: An array containing all column sizes. (default: [12, 12, 12])

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.