react-styled-spacer v1.2.0

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

createSpacerConfig params