styled-components-spacing v3.1.1

styled-components-spacing

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: