Collapse

Usage

Basic

                                                
                                                import React, { useState} from 'react';
                                                import { Button } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                const [isOpen, toggle] = useState<boolean>(true);
                                                
                                                // ...
                                                
                                                <Button onClick={() => toggle(!isOpen)}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

With Toggle From Hook

                                                
                                                import React, { useState} from 'react';
                                                import { Button, Collapse, useCollapse } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                const { isOpen, toggle } = useCollapse(false);
                                                
                                                // ...
                                                
                                                <Button onClick={() => toggle(!isOpen)}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

With Toggle Handler From Hook

                                                
                                                import React, { useState} from 'react';
                                                import { Button, Collapse, useCollapse } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                const { isOpen, toggleHandler } = useCollapse(false);
                                                
                                                // ...
                                                
                                                <Button onClick={toggleHandler}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen}>
                                                  ...
                                                </Collapse>

Responsive

                                                
                                                import React, { useState} from 'react';
                                                import { Button, Collapse } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                const [isOpen, toggle] = useState<boolean>(true);
                                                
                                                // ...
                                                
                                                <Button UNSAFE_className="d-tablet-none" onClick={() => toggle(!isOpen)}>Collapse Trigger ({ isOpen ? 'Open' : 'Closed' })</Button>
                                                <Collapse isOpen={isOpen} collapsibleToBreakpoint="tablet">
                                                  ...
                                                </Collapse>

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

Uncontrolled Collapse

Basic

                                                
                                                import React, { useState } from 'react';
                                                import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                <UncontrolledCollapse
                                                  id="collapse-example"
                                                  renderTrigger={({ isOpen, ...restProps }) => (
                                                    <Button {...restProps}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
                                                  )}
                                                >
                                                  ...
                                                </UncontrolledCollapse>;

                                                
                                                import React, { useState } from 'react';
                                                import { Button, UncontrolledCollapse } from '@lmc-eu/spirit-web-react/components';
                                                
                                                // ...
                                                
                                                <UncontrolledCollapse
                                                  id="collapse-example"
                                                  renderTrigger={({ isOpen, ...restProps }) => (
                                                    <Button {...restProps}>Collapse Trigger ({isOpen ? 'Open' : 'Closed'})</Button>
                                                  )}
                                                  hideOnCollapse
                                                >
                                                  ...
                                                </UncontrolledCollapse>;

API

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

⚠️ DEPRECATION NOTICE

hideOnCollapse property will be replaced in the next major version. Please use isDisposable instead.

We are providing a codemod to assist with this change.

What are deprecations?

Render Toggle API