Responsive margin and padding components for styled-components
💅.
Have a look 👀 at
styled-components-breakpoint
andstyled-components-grid
which both work well with this package.
npm install --save styled-components styled-components-spacing
import React from 'react';
import { Margin, Padding } from 'styled-components-spacing';
<HeroPanel>
<Padding all={{ mobile: 2, tablet: 4, desktop: 6 }}>
<Title>Hello World</Title>
<SubTitle>You are on earth!</SubTitle>
<Margin top={1}>
<Button>Blast off!</Button>
</Margin>
</Padding>
</HeroPanel>;
Spacings and breakpoints 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';
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'
}
};
<ThemeProvider theme={theme}>
<HeroPanel>
<Padding all={{ sm: 1, lg: 2 }}>
<Title>Hello World</Title>
<SubTitle>You are on earth!</SubTitle>
<Margin top={1}>
<Button>Blast off!</Button>
</Margin>
</Padding>
</HeroPanel>
</ThemeProvider>;
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)};
`;
Margin on all sides.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
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.
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.
Margin on the top.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Margin on the bottom.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Margin on the left.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Margin on the right.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Size the element to the width of its children.
Optional. A boolean
. Defaults to false
.
Padding on all sides.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
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.
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.
Padding on the top.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Padding on the bottom.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Padding on the left.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Padding on the right.
Optional. A string
or number
specifying the spacing key. May be a keyed object
specifying spacing keys for multiple breakpoints.
Size the element to the width of its children.
Optional. A boolean
. Defaults to false
.
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 the component
prop - if you wish to use a custom component with this library use .withComponent()