Repository files navigation

Responsive margin and padding components forstyled-components 💅.

Change log

Have a look 👀 atstyled-components-breakpoint andstyled-components-grid which both work well with this package.

npm install --save styled-components styled-components-spacing

Examples

importReactfrom'react';import{Margin,Padding}from'styled-components-spacing';<HeroPanel><Paddingall={{mobile:2,tablet:4,desktop:6}}><Title>Hello World</Title><SubTitle>You are on earth!</SubTitle><Margintop={1}><Button>Blast off!</Button></Margin></Padding></HeroPanel>;

Spacings and breakpoints can be customised usingThemeProvider. For example, to use the same breakpoints and spacings asBootstrap, you can do so like this:

importReactfrom'react';import{ThemeProvider}from'styled-components';import{Margin,Padding}from'styled-components-spacing';consttheme={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'}};<ThemeProvidertheme={theme}><HeroPanel><Paddingall={{sm:1,lg:2}}><Title>Hello World</Title><SubTitle>You are on earth!</SubTitle><Margintop={1}><Button>Blast off!</Button></Margin></Padding></HeroPanel></ThemeProvider>;

importReactfrom'react';importstyledfrom'styled-components';import{my,px}from'styled-components-spacing';constPanel=styled.div`${my({mobile:2,tablet:4})}${px(6)};`;

Margin on all sides.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the left and right.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the top and bottom.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the top.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the bottom.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the left.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the right.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Size the element to the width of its children.

Optional. Aboolean. Defaults tofalse.

Padding on all sides.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the left and right.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the top and bottom.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the top.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the bottom.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the left.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the right.

Optional. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Size the element to the width of its children.

Optional. Aboolean. Defaults tofalse.

Margin on all sides.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the left and right.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the top and bottom.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the top.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the right.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the bottom.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Margin on the left.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on all sides.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the left and right.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the top and bottom.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the top.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the right.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the bottom.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

Padding on the left.

Parameters:

• values - Required. Astring ornumber specifying the spacing key. May be a keyedobject specifying spacing keys for multiple breakpoints.

{0:'0',1:'0.25rem',2:'0.5rem',3:'1rem',4:'2rem',5:'4rem',6:'8rem'}

This library no longer supports thecomponent prop - if you wish to use a custom component with this library use.withComponent()