Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jameslnewell/styled-components-spacing
Responsive margin and padding components for styled-components 💅.
https://github.com/jameslnewell/styled-components-spacing
margin mixins padding react space styled-components whitespace
Last synced: 11 days ago
JSON representation
Responsive margin and padding components for styled-components 💅.
- Host: GitHub
- URL: https://github.com/jameslnewell/styled-components-spacing
- Owner: jameslnewell
- Created: 2017-02-24T01:22:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T16:55:00.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T23:57:32.566Z (7 months ago)
- Topics: margin, mixins, padding, react, space, styled-components, whitespace
- Language: JavaScript
- Homepage:
- Size: 1.53 MB
- Stars: 213
- Watchers: 6
- Forks: 10
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# styled-components-spacing
![npm](https://img.shields.io/npm/v/styled-components-spacing.svg) ![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/styled-components-spacing.svg) ![npm](https://img.shields.io/npm/dm/styled-components-spacing.svg) [![Build Status](https://travis-ci.org/jameslnewell/styled-components-spacing.svg?branch=master)](https://travis-ci.org/jameslnewell/styled-components-spacing)
Responsive margin and padding components for `styled-components` 💅.
> [Change log](https://github.com/jameslnewell/styled-components-spacing/blob/master/CHANGELOG.md)
> Have a look 👀 at [`styled-components-breakpoint`](https://github.com/jameslnewell/styled-components-breakpoint) and [`styled-components-grid`](https://github.com/jameslnewell/styled-components-grid) which both work well with this package.
## Installation
npm install --save styled-components styled-components-spacing
## Usage
> [Examples](https://jameslnewell.github.io/styled-components-spacing/)
### Using the default spacings at the default breakpoints
```js
import React from 'react';
import { Margin, Padding } from 'styled-components-spacing';
Hello World
You are on earth!
Blast off!
;
```### 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](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints), you can do so like this:
```js
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'
}
};
Hello World
You are on earth!
Blast off!
;
```### Using the mixins
```js
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:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### mx(values)
Margin on the left and right.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### my(values)
Margin on the top and bottom.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### mt(values)
Margin on the top.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### mr(values)
Margin on the right.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### mb(values)
Margin on the bottom.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### ml(values)
Margin on the left.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
---
#### p(values)
Padding on all sides.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### px(values)
Padding on the left and right.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### py(values)
Padding on the top and bottom.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### pt(values)
Padding on the top.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### pr(values)
Padding on the right.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### pb(values)
Padding on the bottom.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
#### pl(values)
Padding on the left.
**Parameters:**
* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.
## Defaults
```js
{
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()`](https://www.styled-components.com/docs/api#withcomponent)