styled-components-spacing

!npm !npm bundle size (minified + gzip) !npm [![Build Status]!GithubActions](https://github.com/jameslnewell/styled-components-spacing/actions)

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:

`bash
yarn add styled-components-spacing
`

Usage

$3

`js
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)};
;
`

$3

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




You are on earth!

Blast off!


;
`

$3

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:

`jsx
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'
}
};

{/ ... /};
`

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

styled.d.ts

`tsx
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;
};
}
}
`

$3

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

`jsx
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

$3

Themable mixins for margin.

| Function | Alias | Description |
| -------------------- | ---------- | ----------------------------- |
| margin(name) | m(name) | Margin on all sides. |
| marginY(name) | my(name) | Margin on the top and bottom. |
| marginX(name) | mx(name) | Margin on the left and right. |
| marginTop(name) | mt(name) | Margin on the top. |
| marginRight(name) | mr(name) | Margin on the right. |
| marginBottom(name) | mb(name) | Margin on the bottom. |
| marginLeft(name) | ml(name) | Margin on the left. |

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

$3

Themable mixins for padding.

| Function | Alias | Description |
| --------------------- | ---------- | ------------------------------ |
| padding(name) | mpsize) | Padding on all sides. |
| paddingY(name) | py(name) | Padding on the top and bottom. |
| paddingX(name) | px(name) | Padding on the left and right. |
| paddingTop(name) | pt(name) | Padding on the top. |
| paddingRight(name) | pr(name) | Padding on the right. |
| paddingBottom(name) | pb(name) | Padding on the bottom. |
| paddingLeft(name) | pl(name) | Padding on the left. |

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

$3

A themable component for margin and padding.

| Property | Alias | Type | Default | Description |
| --------------- | ----- | -------------------------------- | ------- | ---------------------------------------------- |
| inline | | boolean | false | Size the element to the width of its children. |
| margin | m | string or number or object | | Margin on all sides. |
| marginY | my | string or number or object | | Margin on the top and bottom. |
| marginX | mx | string or number or object | | Margin on the left and right. |
| marginTop | mt | string or number or object | | Margin on the left and right. |
| marginRight | mr | string or number or object | | Margin on the right. |
| marginBottom | mb | string or number or object | | Margin on the bottom. |
| marginLeft | ml | string or number or object | | Margin on the left. |
| padding | p | string or number or object | | Padding on all sides. |
| paddingY | py | string or number or object | | Padding on the top and bottom. |
| paddingX | px | string or number or object | | Padding on the left and right. |
| paddingTop | pt | string or number or object | | Padding on the left and right. |
| paddingRight | pr | string or number or object | | Padding on the right. |
| paddingBottom | pb | string or number or object | | Padding on the bottom. |
| paddingLeft | pl | string or number or object | | Padding on the left. |

$3

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.

$3

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:

| Name | Value |
| ---- | --------- |
| 0 | 0 |
| 1 | 0.25rem |
| 2 | 0.5rem |
| 3 | 1rem |
| 4 | 2rem |
| 5 | 4rem |
| 6 | 8rem` |