react-styled-spacer

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