<Block />

Block is a layout component for creating block elements.

Usage

Block will render a div by default, creating a block element.

01
02
03
<Block backgroundColor='primary-100' p={4} m={1}>
  01
</Block>
<Block backgroundColor='primary-100' p={4} m={1}>
  02
</Block>
<Block backgroundColor='primary-100' p={4} m={1}>
  03
</Block>

Usage with refs

If you need to pass a ref to Block, use a RefBlock:

import { useRef } from 'react'
import { RefBlock } from 'componentry'

function LayoutWithRef() {
  const ref = useRef(null)
  return <RefBlock ref={ref} p={4}></RefBlock>
}