React space component for padding and margin

Spacer.jsx

import React from 'react'

const BASE = 8
const SIDES = ['Top', 'Right', 'Bottom', 'Left']
const SIDES_LOWERCASE = ['top', 'right', 'bottom', 'left']

function isNullLike(value) {
  return value === null || typeof value === 'undefined'
}

function normalizeSpace(
  { all, horizontal, vertical, top, right, bottom, left } = {}
) {
  const space = {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  }

  if (!isNullLike(all)) {
    space.top = all
    space.right = all
    space.bottom = all
    space.left = all
  }

  if (!isNullLike(horizontal)) {
    space.right = horizontal
    space.left = horizontal
  }

  if (!isNullLike(vertical)) {
    space.top = vertical
    space.bottom = vertical
  }

  if (!isNullLike(top)) {
    space.top = top
  }

  if (!isNullLike(right)) {
    space.right = right
  }

  if (!isNullLike(bottom)) {
    space.bottom = bottom
  }

  if (!isNullLike(left)) {
    space.left = left
  }

  return space
}

function Spacer({ tag = 'div', padding, margin, ...props }) {
  const paddingSpace = normalizeSpace(padding)
  const paddingStyles = SIDES_LOWERCASE.reduce(
    (acc, side, index) => ({
      ...acc,
      [`padding${SIDES[index]}`]: paddingSpace[side] * BASE,
    }),
    {}
  )

  const marginSpace = normalizeSpace(margin)
  const marginStyles = SIDES_LOWERCASE.reduce(
    (acc, side, index) => ({
      ...acc,
      [`margin${SIDES[index]}`]: marginSpace[side] * BASE,
    }),
    {}
  )

  return React.createElement(tag, {
    ...props,
    style: { ...paddingStyles, ...marginStyles },
  })
}

export { Spacer as default, BASE }