Component

Box is available in React Visage only, where it is the basic building-block of a React Visage component. It understands all of the "core" React Visage props like spacing, background color, and visually-hidden.

This is useful if you'd like to add a simple container with some spacing, or if you'd like to build your own React Visage components that will understand the "core" Visage props itself.

(If you are not using React Visage, you can just add the Visage CSS classes to whatever HTML element you'd like, such as div.)

Develop

Let's say that you're creating a custom component and you want that component to understand the Visage spacing system or the component prop or any of the other cool props that all Visage components understand.

// "inherit" (compose) the props from Box
type MyCustomComponentProps = React.ComponentProps<typeof Box> & {
  someProp: string
}

const MyCustomComponent: React.FunctionComponent<MyCustomComponentProps> =
  props => {
    const { someProp, ...allOtherProps } = props

    // do something fancy with `someProp` if you want

    // return a <Box> rather than a <div>
    // use the `component` prop to set the default component (e.g. "div")
    return <Box component="div" {...allOtherProps} />
  }

That's it! It really just boils down to rendering a Box rather than a whatever html element you were going to render.

Now you can do all kinds of fun stuff:

<>
  <MyCustomComponent mx="auto" />
  <MyCustomComponent component="span" />
  <MyCustomComponent visuallyHidden />
  <MyCustomComponent backgroundColor="light-grey" />
</>

Box

Box has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Box

Usage

Building your own React Visage components with Box

Components

Box