{"id":16374846,"url":"https://github.com/jameslnewell/styled-components-spacing","last_synced_at":"2025-04-05T08:06:21.325Z","repository":{"id":17914682,"uuid":"82987990","full_name":"jameslnewell/styled-components-spacing","owner":"jameslnewell","description":"Responsive margin and padding components for styled-components 💅.","archived":false,"fork":false,"pushed_at":"2022-12-09T16:55:00.000Z","size":1605,"stargazers_count":213,"open_issues_count":22,"forks_count":10,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-14T23:57:32.566Z","etag":null,"topics":["margin","mixins","padding","react","space","styled-components","whitespace"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jameslnewell.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-24T01:22:01.000Z","updated_at":"2023-06-16T04:36:33.000Z","dependencies_parsed_at":"2023-01-14T00:15:16.791Z","dependency_job_id":null,"html_url":"https://github.com/jameslnewell/styled-components-spacing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-spacing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-spacing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-spacing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jameslnewell%2Fstyled-components-spacing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jameslnewell","download_url":"https://codeload.github.com/jameslnewell/styled-components-spacing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["margin","mixins","padding","react","space","styled-components","whitespace"],"created_at":"2024-10-11T03:18:36.246Z","updated_at":"2025-04-05T08:06:21.294Z","avatar_url":"https://github.com/jameslnewell.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# styled-components-spacing\n\n![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)\n\nResponsive margin and padding components for `styled-components` 💅.\n\n\u003e [Change log](https://github.com/jameslnewell/styled-components-spacing/blob/master/CHANGELOG.md)\n\n\u003e 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.\n\n## Installation\n\n    npm install --save styled-components styled-components-spacing\n\n## Usage\n\n\u003e [Examples](https://jameslnewell.github.io/styled-components-spacing/)\n\n### Using the default spacings at the default breakpoints\n\n```js\nimport React from 'react';\nimport { Margin, Padding } from 'styled-components-spacing';\n\n\u003cHeroPanel\u003e\n  \u003cPadding all={{ mobile: 2, tablet: 4, desktop: 6 }}\u003e\n    \u003cTitle\u003eHello World\u003c/Title\u003e\n    \u003cSubTitle\u003eYou are on earth!\u003c/SubTitle\u003e\n    \u003cMargin top={1}\u003e\n      \u003cButton\u003eBlast off!\u003c/Button\u003e\n    \u003c/Margin\u003e\n  \u003c/Padding\u003e\n\u003c/HeroPanel\u003e;\n```\n\n### Using custom spacings at custom breakpoints\n\nSpacings 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:\n\n```js\nimport React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { Margin, Padding } from 'styled-components-spacing';\n\nconst theme = {\n  breakpoints: {\n    xs: 0,\n    sm: 576,\n    md: 768,\n    lg: 992,\n    xl: 1200\n  },\n  spacing: {\n    0: '0',\n    1: '0.25rem',\n    2: '0.5rem',\n    3: '1rem',\n    4: '1.5rem',\n    5: '3rem'\n  }\n};\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cHeroPanel\u003e\n    \u003cPadding all={{ sm: 1, lg: 2 }}\u003e\n      \u003cTitle\u003eHello World\u003c/Title\u003e\n      \u003cSubTitle\u003eYou are on earth!\u003c/SubTitle\u003e\n      \u003cMargin top={1}\u003e\n        \u003cButton\u003eBlast off!\u003c/Button\u003e\n      \u003c/Margin\u003e\n    \u003c/Padding\u003e\n  \u003c/HeroPanel\u003e\n\u003c/ThemeProvider\u003e;\n```\n\n### Using the mixins\n\n```js\nimport React from 'react';\nimport styled from 'styled-components';\nimport { my, px } from 'styled-components-spacing';\n\nconst Panel = styled.div`\n  ${my({ mobile: 2, tablet: 4 })} ${px(6)};\n`;\n```\n\n## Components\n\n### \u0026lt;Margin/\u0026gt;\n\n#### all\n\nMargin on all sides.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### horizontal\n\nMargin on the left and right.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### vertical\n\nMargin on the top and bottom.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### top\n\nMargin on the top.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### bottom\n\nMargin on the bottom.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### left\n\nMargin on the left.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### right\n\nMargin on the right.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### inline\n\nSize the element to the width of its children.\n\nOptional. A `boolean`. Defaults to `false`.\n\n### \u0026lt;Padding/\u0026gt;\n\n#### all\n\nPadding on all sides.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### horizontal\n\nPadding on the left and right.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### vertical\n\nPadding on the top and bottom.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### top\n\nPadding on the top.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### bottom\n\nPadding on the bottom.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### left\n\nPadding on the left.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### right\n\nPadding on the right.\n\nOptional. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### inline\n\nSize the element to the width of its children.\n\nOptional. A `boolean`. Defaults to `false`.\n\n## Mixins\n\n#### m(values)\n\nMargin on all sides.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### mx(values)\n\nMargin on the left and right.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### my(values)\n\nMargin on the top and bottom.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### mt(values)\n\nMargin on the top.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### mr(values)\n\nMargin on the right.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### mb(values)\n\nMargin on the bottom.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### ml(values)\n\nMargin on the left.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n---\n\n#### p(values)\n\nPadding on all sides.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### px(values)\n\nPadding on the left and right.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### py(values)\n\nPadding on the top and bottom.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### pt(values)\n\nPadding on the top.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### pr(values)\n\nPadding on the right.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### pb(values)\n\nPadding on the bottom.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n#### pl(values)\n\nPadding on the left.\n\n**Parameters:**\n\n* `values` - Required. A `string` or `number` specifying the spacing key. May be a keyed `object` specifying spacing keys for multiple breakpoints.\n\n## Defaults\n\n```js\n{\n  0: '0',\n  1: '0.25rem',\n  2: '0.5rem',\n  3: '1rem',\n  4: '2rem',\n  5: '4rem',\n  6: '8rem'\n}\n```\n\n## Rendering on a custom component\n\nThis 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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-spacing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjameslnewell%2Fstyled-components-spacing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjameslnewell%2Fstyled-components-spacing/lists"}