Collapsible

@component-controls/components

3.4.5

Animated expand/collapse container component, using react-animate-height.

Component

browse

docs

issues

import { Collapsible } from '@component-controls/components';

Overview

browse

docs

issues

({ easing }) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <Box>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'close' : 'open'}
      </Button>
      <Collapsible isOpen={isOpen} easing={easing}>
        <Donut value={1 / 2} />
      </Collapsible>
    </Box>
  );
}

Controls

Name	Description	Default	Controls
easing	string	-

Properties

	Name	Description	Default
CollapsibleOwnProps (1 properties)

	isOpen	controlled open state boolean	-
HTMLAttributes (44 properties)
AriaAttributes (48 properties)
DOMAttributes (159 properties)
- (10 properties)

External dependencies

package	imports	peer
react ^17.0.1	ReactFC	*
react-animate-height ^2.0.20	AnimateHeightAnimateHeightProps

Component JSX

<AnimateHeight

height

react-animate-height

^2.0.20

component-controls/BlockContainer

component-controls/ColorMode

Docs

Collapsible

Component

Overview

Controls

Properties

External dependencies

Component JSX