@berlitz/spacer

Spacer

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