React Styled Spacer
A versatile spacing component used to represent whitespace in your layout for both React and React-Native.
Installation
npm i react-styled-spacer
Usage
While not a requirement, configuration is available through the styled-components library.
import Spacer from 'react-styled-spacer'
import { ThemeProvider } from 'styled-components'
const App = () => (
const spacerConfig = createSpacerConfig({
debug: false,
multiplier: 1,
default: 0
custom: {
small: 10,
medium: 20,
}
})
<ThemeProvider theme={{ ...spacerConfig }}>
<h1>I have 20px below me</h1>
{/* Any value can be used, will default to pixels */}
<Spacer h={20} />
<p>I have 20px above me</p>
{/* Works with styled-components theming context */}
<Spacer h="small" />
<ul>
{/* Will space between children if provided */}
<Spacer h={20}>
<li>I have 20px below me</li>
<li>I have 20px below & above me</li>
<li>I have 20px above me</li>
</Spacer>
</ul>
{/* Will space around children instead if provided spaceAround */}
<Spacer spaceAround h={20}>
<p>I have 20 px below and above me</p>
</Spacer>
</ThemeProvider>
)
Spacer Props
| Property | type | required | default | description |
|---|
| h | string, number | false | 10px | Specifies spacer height |
| w | string, number | false | 10px | Specifies spacer width |
| grow | string, number | false | undefined | flex-grow property for flexbox use |
| shrink | string, number | false | undefined | flex-shrink property for flexbox use |
| spaceAround | boolean | false | false | Spaces around its children |
createSpacerConfig params
| Property | type | required | default | description |
|---|
| custom | object | false | {} | Maps the key to represent a value as w/h |
| debug | boolean | false | false | Shows spacers |
| default | string, number | false | 0 | Default value for height and width |
| multiplier | number | false | 1 | Scaling multiplier applied to every spacer |
