react-spacer
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

React Spacer

An element to repesent space between other elements, for use in flexbox layouts.

Works both on the web and in React Native.

Installation

npm install --save react-spacer

Usage

const Spacer = require('react-spacer')
 
const React = require('react')
const { render } = require('react-dom')
 
const Header = () => (
  <div style={{ display: 'flex' }}>
    <div>MyApp</div>
    <Spacer grow='1' />
    <div>Login</div>
    <Spacer width='12px' />
    <div>Sign up</div>
  </div>
)
 
render(<Header />)

Will render something like this:

MyApp                                       Login   Sign Up

Props

width

  • optional
  • type: string or number

The width of the space.

height

  • optional
  • type: string or number

The height of the space.

grow

  • optional
  • type: string or number

The flex grow factor of the space.

shrink

  • optional
  • type: string or number

The flex shrink factor of the space.

Dependencies (0)

    Dev Dependencies (3)

    Package Sidebar

    Install

    npm i react-spacer

    Weekly Downloads

    700

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    4.99 kB

    Total Files

    8

    Last publish

    Collaborators

    • linusu