Home

Awesome

styled-components-spacing

npm npm bundle size (minified + gzip) npm Build Status

Responsive margin and padding components for styled-components 💅.

Change log

Have a look 👀 at styled-components-breakpoint and styled-components-grid which both work well with this package.

Installation

npm install --save styled-components styled-components-spacing

Usage

Examples

Using the default spacings at the default breakpoints

import React from 'react';
import { Margin, Padding } from 'styled-components-spacing';

<HeroPanel>
  <Padding all={{ mobile: 2, tablet: 4, desktop: 6 }}>
    <Title>Hello World</Title>
    <SubTitle>You are on earth!</SubTitle>
    <Margin top={1}>
      <Button>Blast off!</Button>
    </Margin>
  </Padding>
</HeroPanel>;

Using custom spacings at custom breakpoints

Spacings and breakpoints can be customised using ThemeProvider. For example, to use the same breakpoints and spacings as Bootstrap, you can do so like this:

import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Margin, Padding } from 'styled-components-spacing';

const theme = {
  breakpoints: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
    xl: 1200
  },
  spacing: {
    0: '0',
    1: '0.25rem',
    2: '0.5rem',
    3: '1rem',
    4: '1.5rem',
    5: '3rem'
  }
};

<ThemeProvider theme={theme}>
  <HeroPanel>
    <Padding all={{ sm: 1, lg: 2 }}>
      <Title>Hello World</Title>
      <SubTitle>You are on earth!</SubTitle>
      <Margin top={1}>
        <Button>Blast off!</Button>
      </Margin>
    </Padding>
  </HeroPanel>
</ThemeProvider>;

Using the mixins

import React from 'react';
import styled from 'styled-components';
import { my, px } from 'styled-components-spacing';

const Panel = styled.div`
  ${my({ mobile: 2, tablet: 4 })} ${px(6)};
`;

Components

<Margin/>

all

Margin on all sides.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

horizontal

Margin on the left and right.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

vertical

Margin on the top and bottom.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

top

Margin on the top.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

bottom

Margin on the bottom.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

left

Margin on the left.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

right

Margin on the right.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

inline

Size the element to the width of its children.

Optional. A boolean. Defaults to false.

<Padding/>

all

Padding on all sides.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

horizontal

Padding on the left and right.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

vertical

Padding on the top and bottom.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

top

Padding on the top.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

bottom

Padding on the bottom.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

left

Padding on the left.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

right

Padding on the right.

Optional. A string or number specifying the spacing key. May be a keyed object specifying spacing keys for multiple breakpoints.

inline

Size the element to the width of its children.

Optional. A boolean. Defaults to false.

Mixins

m(values)

Margin on all sides.

Parameters:

mx(values)

Margin on the left and right.

Parameters:

my(values)

Margin on the top and bottom.

Parameters:

mt(values)

Margin on the top.

Parameters:

mr(values)

Margin on the right.

Parameters:

mb(values)

Margin on the bottom.

Parameters:

ml(values)

Margin on the left.

Parameters:

p(values)

Padding on all sides.

Parameters:

px(values)

Padding on the left and right.

Parameters:

py(values)

Padding on the top and bottom.

Parameters:

pt(values)

Padding on the top.

Parameters:

pr(values)

Padding on the right.

Parameters:

pb(values)

Padding on the bottom.

Parameters:

pl(values)

Padding on the left.

Parameters:

Defaults

{
  0: '0',
  1: '0.25rem',
  2: '0.5rem',
  3: '1rem',
  4: '2rem',
  5: '4rem',
  6: '8rem'
}

Rendering on a custom component

This library no longer supports the component prop - if you wish to use a custom component with this library use .withComponent()