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