How to Use the MUI-Spacer Component

A handful of UI libraries have a spacer component that adds space outside of components to keep component layout decoupled. This post suggested creating one for React, and I thought that was a good idea.

I created a component named Spacer that wraps the MUI Divider, strips out the visible aspects (more on that later), and adds a prop for size. Here’s what a vertical and horizontal example look like:

The vertical spacer is between the right align button and bold icons, while the horizontal spacer is between each list item. It’s difficult to show a visual of an invisible component….

How to Use the Spacer

The Material-UI Spacer is a wrapper around the MUI Divider, plus additional functionality. All the same props available on the Divider can be used with the Spacer.

Additionally, there is a new prop called space. This prop takes a string value that needs to include ‘px’. I may change this in the future to also accept a number value and append ‘px’.

Both the examples in this post are taken from MUI Divider docs examples, but converted to use Spacer. Here is the code that created the vertical spacer example:

<Box
  sx={{
    display: 'flex',
    alignItems: 'center',
    width: 'fit-content',
    border: (theme) => `1px solid ${theme.palette.divider}`,
    borderRadius: 1,
    bgcolor: 'background.paper',
    color: 'text.secondary',
    '& svg': {
      m: 1.5,
    },
    '& hr': {
      mx: 0.5,
    },
  }}
>
  <FormatAlignLeftIcon />
  <FormatAlignCenterIcon />
  <FormatAlignRightIcon />
  <Spacer orientation="vertical" flexItem space="12px" />
  <FormatBoldIcon />
  <FormatItalicIcon />
</Box>

Here is the horizontal example:

<List
  sx={{
    width: '100%',
    maxWidth: 360,
    bgcolor: 'background.paper',
    border: '1px solid',
    borderColor: 'primary.main',
    borderRadius: 1
  }}
>
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <ImageIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary="Photos" secondary="Item 1" />
  </ListItem>
  <Spacer variant="inset" component="li" space="12px"/>
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <WorkIcon />
      </Avatar>
    </ListItemAvatar>   
    <ListItemText primary="Work" secondary="Item 2" />
  </ListItem>
      <Spacer component="li" sx={{marginLeft: '5%', marginRight: '5%'}} space="12px"/>
  <ListItem>
    <ListItemAvatar>
      <Avatar>
        <BeachAccessIcon />
      </Avatar>
    </ListItemAvatar>
    <ListItemText primary="Vacation" secondary="Item 3" />
  </ListItem>
</List>

Notice the space prop accepting a string value on both. The typical values such as orientation and component still provide functionality.

How the Material-UI Spacer Was Created

Here is the code that created the Spacer component:

interface SpacerProps extends DividerProps {
  space?: string;
  component?: string;
}

export default function (props: SpacerProps) {
  const {space, sx, ...rest} = props;
  const direction = rest?.orientation === 'vertical' ? 'borderRightWidth' : 'borderBottomWidth'
  return (
    <Divider sx={{borderColor: 'transparent', ...sx, ...{[direction]: space ? space : '1px'}}} {...rest}/>
  );
}

There are three steps executed by this code:

• Detect the orientation
• Add passed or default spacing and make the border transparent
• Add passed sx styling prop

The MUI Divider receives its visual features through the border. It doesn’t have visible width or height. The spacer sets the border color to transparent in order to render a clear space.

Like the Divider, the Spacer can receive increased thickness by adjusting the appropriate border width. The particular border to adjust depends on the orientation. The purpose of the MUI Spacer is to abstract this to a single prop.

Let me know in the comments if you have any recommendations for improvements.

Links

If you are new to MUI, search my 100+ articles on MUI or try out my MUI Tutorial.

NPM package link

Github link

This post helped me understand adding types to an npm package.