@entria/responsiveness

Responsive style tools for ReactJS

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@entria/responsiveness
1521.0.35 years ago5 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)