‚̧Nil Packet Minimizer

    styled-components-spacing

    3.1.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    styled-components-spacing

    npm npm bundle size (minified + gzip) npm Build Status

    Responsive margin and padding components for styled-components ūüíÖ.

    Change log

    Have a look ūüĎÄ at styled-components-breakpoint and styled-components-grid which both work well with this package.

    Installation

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

    Usage

    Examples

    Using the default spacings at the default breakpoints

    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>;

    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, 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>;

    Using the mixins

    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.

    component

    The component to render the styles on.

    Optional. A string or valid React component. Defaults to div.

    <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.

    component

    The component to render the styles on.

    Optional. A string or valid React component. Defaults to div.

    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

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

    Install

    npm i styled-components-spacing

    DownloadsWeekly Downloads

    1,794

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    42.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • jameslnewell
    • lauriejones