VerticalStackV2

Example.ts

import React from 'react'

import { VerticalStack } from '../VerticalStack2/VerticalStack2'

export function App() {
  return (
    <VerticalStack gap={10} passthrough skipLast>
      <h1>Hello world</h1>
      <p>Bla bla bla</p>
      <p>Bla bla bla</p>
    </VerticalStack>       
  )
}

VerticalStack2.css

.gap10 {
  margin-bottom: 10px;
}

.gap20 {
  margin-bottom: 20px;
}

.gap30 {
  margin-bottom: 30px;
}

.gap40 {
  margin-bottom: 40px;
}

.gap50 {
  margin-bottom: 50px;
}

VerticalStackV2.ts

import React from 'react'
import cx from 'classnames'

import styles from './VerticalStack2.css'

function getClassName(el: React.ReactElement<any>) {
  return (el.props && el.props.className) || ''
}

type VerticalStackProps = {
  children: React.Node
  className?: string
  gap?: 10 | 20 | 30 | 40 | 50
  passthrough?: boolean
  skipLast?: boolean
  skipFirst?: boolean
}

function VerticalStack(props: VerticalStackProps) {
  const {
    children,
    className,
    passthrough,
    skipLast,
    skipFirst,
  } = props

  const classes = cx({
    [styles[`gap${String(gap)}`]]: gap > 0,
  })

  if (passthrough) {
    return (
      <>
        {React.Children.map(
          children as React.ReactElement[],
          (child, index) => {
            if (skipLast && index === React.Children.count(children) - 1) {
              return child
            }

            if (skipFirst && index === 0) {
              return child
            }

            return React.cloneElement(child, {
              className: cx(getClassName(child), className, classes),
            })
          },
        )}
      </>
    )
  }

  return <div className={cx(className, classes)}>{children}</div>
}

export { VerticalStack }