Collapse
React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content.
Usage
Example
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Script
const [collapse, setCollapse] = useState(false); const [collapse2, setCollapse2] = useState(false); const onEntering = () => {}; const onEntered = () => {}; const onExiting = () => {}; const onExited = () => {}; const toggle = (e)=>{ setCollapse(!collapse); e.preventDefault(); } // inner const toggle2 = (e)=>{ setCollapse2(!collapse2); e.preventDefault(); } return ( <CCard> <CCollapse show={collapse} onEntering={onEntering} onEntered={onEntered} onExiting={onExiting} onExited={onExited} > <CCardBody> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </p> <CCard> <CCollapse show={collapse2} > <CCardBody> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. </p> </CCardBody> </CCollapse> <CCardFooter> <CButton onClick={toggle2} className={'mb-1'} > Toggle Inner Collapse </CButton> </CCardFooter> </CCard> </CCardBody> </CCollapse> <CCardFooter> <CButton color="primary" onClick={toggle} className={'mb-1'} > Toggle Collapse </CButton> </CCardFooter> </CCard> )# Features
- Collapse animation
- Optional duration and transition effect
- Adapted to use in navbars
# Collapse API
| Name | Required | Type | Default Value |
|---|---|---|---|
| children | (ArrayOf(string) | any) | ||
| main tag content | |||
| className | string | ||
| user classes for the main HTML tag | |||
| innerRef | (object | Function | string) | ||
| ref to the main tag | |||
| show | boolean | false | |
| show state | |||
| navbar | boolean | ||
| set for collapse inside a navbar component | |||