Neverending Perpetual Motion
    Have ideas to improve npm?Join in the discussion! »

    @berlitz/spacer

    2.0.7 • Public • Published

    Spacer npm version

    The Spacer component creates space between your other Components/Elements. Use the size Prop to specify the size of the space, based on the theme size variables. This comes with responsive breakpoints. This can be used as a wrapper which will act as padding around the wrapped children.

    Installation

    yarn add @berlitz/spacer

    Props

    Argument Type Required Default Example
    top bool false
    bottom bool false
    left bool false
    right bool false
    noTop bool false
    noBottom bool false
    noLeft bool false
    noRight bool false
    size string "md" "xs" (refer to theme variables theme.space[size])
    breakpoints object {} breakpoints={{md: 'lg', lg: 'xxl',}}

    Usage

    import React from 'react'
    import Spacer from '@berlitz/spacer'
    
    const MyApp = () => 
    <App>
        <Hero>
        <Section>
            <H1>Boo!</H1>
            <LeadText> Hello Friend 👻</LeadText>
            <Spacer size="xl"/>
            <Content>Some Paragraph</Content>
            <Spacer
                noBottom
                size="xl"
                breakpoints={{
                    lg: 'md',
                    xl: 'xxl',
                }}
            >
                <Image/>
            </Spacer>
            <ThreeCatPillars/>
        </Section>
        <Footer/>
    </App>

    When to use this component

    • Rather than extending components just for space, this component comes very handy.
    • Quickly Add space anywhere necessary

    Keywords

    none

    Install

    npm i @berlitz/spacer

    DownloadsWeekly Downloads

    2,393

    Version

    2.0.7

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar