react-expansion v0.3.1

react-expansion

Fully customizable and reusable expand/collapse component

What is this

react-expansion sees the expand/collapse system as the composition of multiple bricks. the picture bellow resumes it all.

Picture generated with excalidraw.

Install

npm install --save react-expansion

or

yarn add react-expansion

Demo

This ongoing codeSandbox will contain reusable examples

Props and Usage hints

To use react-expansion, you need to define a few components on your own because we prefer to stay agnostic to the UI.

These components will receive the following props:

The ExpandCollapse component props are:

You can also imperatively handle the expansion state if not controlled. The useImperativeHandle hook exposes the following functions:

• expand
• collapse
• toggleExpansion

and can be used like this:

const myRef = React.useRef()
function expand() {
  myRef.current.expand()
}
function collapse() {
  myRef.current.collapse()
}
function toggle() {
  myRef.current.toggleExpansion()
}
// later
<SomeButton onClick={toggle}>Toggle</SomeButton>
<SomeButton onClick={expand}>Expand</SomeButton>
<SomeButton onClick={collapse}>Collapse</SomeButton>
<ExpandCollapse ref={myRef} {...}>Some tags and children</ExpandCollapse>

Limitations and roadmap

• The ExpandCollapse component wraps the children in a div so its display style is managed and thus we can offer the keepMounted ability
• There is no support for animations, but we hope it will be released in the v2 (instead, you can pass the needed css using className or style via the contentContainerProps)

Usage examples

There is a lot of examples that can be made with this ExpandCollapse.

Let's create a navigation file system that will display a files tree (folders & files).

I will be using Material-ui to illustrate my examples for faster dev.

First: the IndicatorComponent

const useIndicatorStyles = makeStyles({
  iconButton: {
    border: `1px solid`,
    padding: '0px',
  },
  icon: {
    width: '12px',
    height: '12px'
  }
});
function FileSystemIndicator({ expanded, toggleExpansion, variant = 'file'}) {
  const classes = useIndicatorStyles()
  if (variant === 'file') {
    return null; // no indicator when it's a file
  }
  return (
    <IconButton color="primary"  className={classes.iconButton} onClick={toggleExpansion} size="small">
      <SvgIcon className={classes.icon}>
        {expanded ? <ArrowDown /> : <ArrowRight />}
      </SvgIcon>
    </IconButton>
  )
}

Then: the LabelComponent

import File from '@material-ui/icons/InsertDriveFile'
import FolderOpen from '@material-ui/icons/FolderOpen'
import FolderClosed from '@material-ui/icons/Folder'

const useStyles = makeStyles({
  root: {
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    marginLeft: 4
  },
  icon: {
    width: '12px',
    height: '12px',
    marginRight: 4
  }
})
function FileSystemLabel({filename, fileUrl, variant = 'file', expanded, toggleExpansion}) {
  const classes = useStyles()
  function onClick() {
    if (fileUrl) {
      alert(`We can load a file content here from it's url ${fileUrl}`)
    } else {
      toggleExpansion()
    }
  }
  return (
    <Typography onClick={onClick} color="primary" component="div" className={classes.root}>
      <SvgIcon className={classes.icon}>
        {variant === 'folder' && expanded && <FolderOpen/>}
        {variant === 'folder' && !expanded && <FolderClosed/>}
        {variant === 'file' && <File/>}
      </SvgIcon>
      <Typography color="primary" component="span">
        {filename}
      </Typography>
    </Typography>
  )
}

Then: the DividerComponent which will be nothing:

function Nothing() {
  return null;
}

And then, the FileUnit that returns our ExpandCollapse:

function FileUnit({children, filename, variant, fileUrl, ...rest}) {
  return (
    <ExpandCollapse
      keepMounted
      Component="div"
      indicatorPosition='start'
      ExpansionComponent='div'
      ExpansionProps={{style: {display: 'flex', alignItems: 'center'}}}
      LabelComponent={FileSystemLabel}
      LabelProps={{filename, variant, fileUrl}}
      label={filename}
      IndicatorComponent={FileSystemIndicator}
      IndicatorProps={{variant}}
      contentContainerProps={{
        style: {
          marginLeft: 24
        }
      }}
      {...rest}
    >
      {children}
    </ExpandCollapse>
  )
}

The resulting ExpandCollapse with a minimal example will give this output

We can also create a large variant of expand collapse and combine them. Here is a picture, I am still looking to create multiple other examples in a demo package.

License

MIT © incepter