styled-components-spacing

![Build Status]

Responsive margin and padding utilities for styled-components 💅.

🕸 Website

📘 Change log

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

Installation

NPM:

npm install styled-components-spacing

Yarn:

yarn add styled-components-spacing

Usage

Using the themable mixins

import React from 'react';
import styled from 'styled-components';
import { marginY, paddingX } from 'styled-components-spacing';

const HeroPanel = styled.div`
  ${marginY({ mobile: 2, tablet: 4 })}
  ${paddingX(6)};
`;

Using the themable component

import React from 'react';
import { Spacing } from 'styled-components-spacing';

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

Using custom breakpoints and spacings for the themable mixins and components

The themable breakpoints and spacings 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';

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}>{/* ... */}</ThemeProvider>;

If you're using Typescript, you'll also need to define the breakpoints and spacings on the theme.

styled.d.ts

import { DefaultTheme } from 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    breakpoints: {
      [name in 'xs' | 'sm' | 'md' | 'lg' | 'xl']: number;
    };
    spacings: {
      [name in 0 | 1 | 2 | 3 | 4 | 5]: string;
    };
  }
}

Using the mixin factories

If your breakpoints and spacings don't need to be themable then you can use the static mixin factories.

import styled from 'styled-components';
import { createMap } from 'styled-components-breakpoint';
import { createMarginY, createPaddingX } from 'styled-components-spacing';

const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200
};

const spacing {
  0: '0',
  1: '0.25rem',
  2: '0.5rem',
  3: '1rem',
  4: '1.5rem',
  5: '3rem'
};

const map = createMap(breakpoints);
const marginY = createMarginY(map, spacings);
const paddingX = createPaddingX(map, spacings);

const HeroPanel = styled.div`
  ${marginY({ xs: 2, md: 4 })}
  ${paddingX(5)};
`;

API

Margin mixins

Themable mixins for margin.

Where name is a string or number specifying the spacing name. May be a map object specifying spacing across various breakpoints.

Padding mixins

Themable mixins for padding.

Where name is a string or number specifying the spacing name. May be a map object specifying spacing across various breakpoints.

<Spacing/> components

A themable component for margin and padding.

Margin mixin factories

Factory functions to create mixins for margin:

• createMargin(map, spacings)
• createMarginY(map, spacings)
• createMarginX(map, spacings)
• createMarginTop(map, spacings)
• createMarginRight(map, spacings)
• createMarginBottom(map, spacings)
• createMarginLeft(map, spacings)

Where map is function created by createMap from styled-components-breakpoint.

Where spacings is a map of spacings.

Padding mixin factories

Factory functions to create mixins for padding:

• createPadding(map, spacings)
• createPaddingY(map, spacings)
• createPaddingX(map, spacings)
• createPaddingTop(map, spacings)
• createPaddingRight(map, spacings)
• createPaddingBottom(map, spacings)
• createPaddingLeft(map, spacings)

Where map is function created by createMap from styled-components-breakpoint.

Where spacings is a map of spacings.

Default spacings

If you don't provide any spacings, the default spacings used by the mixins and components are:

Change log

3.1.1

• fix zero indexed margin/paddings issue (#12)

3.1.0

• added the module field
• added badges to README

3.0.1

• added Margin.displayName and Padding.displayName (#9)

3.0.0

• updated the peerDependency to support styled-components@^3
• potential breaking change: upgraded to `styled-components-breakpoint@2.0.0` which only supports breakpoints defined as px
• potential breaking change: removed the theme parameter from the mixins, simplifying use of customised breakpoints and spacings
• potential breaking change: removed use of react-create-component-from-tag-prop since styled-components now has component.withComponent()

2.1.3

• fix: not used to a new IDE which doesn't auto save

2.1.2

• fix: remove undefined margin values

2.1.1

• fix: updated the documentation

2.1.0

• add: added a component prop to customise the underlying element type

2.0.4

• fix: Use prop-types to make warning with `react@15.5` go away

2.0.1-3

• fix: usage examples

2.0.0

• break: removed display: inline-block; from <Margin/> because an inline-block wrapping a block changes the width of the block. e.g. <Margin><h1/></Margin> meant the h1 was unexpectedly not full width
• addition: added a prop named inline to change <Margin/> and <Padding/> to from block to inline-block.