Neurotic and Probably Misinformed

    This package has been deprecated

    Author message:

    moved to @idui/react-collapse

    @kaprisa57/react-collapse

    1.0.2 • Public • Published

    Collapse React Component

    NPM JavaScript Style Guide Coverage Status

    Install

    npm install --save @kaprisa57/react-collapse
    yarn add @kaprisa57/react-collapse

    See props in Docs

    Basic Example

    import React from 'react'
    import Collapse from '@kaprisa57/react-collapse'
    
    function Example() {
      return <Collapse>
        <Collapse.Header>Open</Collapse.Header>
        <Collapse.Body>:)</Collapse.Body>
      </Collapse>
    }

    Header Function

    import React, { Fragment } from 'react'
    import Collapse from '@kaprisa57/react-collapse'
    
    function Example() {
      return <Collapse>
          <Header>
            {({ open, close, toggle }) => (
              <Fragment>
                <button onClick={open}>Open</button>
                <button onClick={close}>Close</button>
                <button onClick={toggle}>Toggle</button>
              </Fragment>
            )}
          </Header>
          <Collapse.Body>:)</Collapse.Body>
      </Collapse>
    }

    Body Function

    import React from 'react'
    import Collapse from '@kaprisa57/react-collapse'
    
    function Example() {
      return <Collapse>
        <Collapse.Header>Open</Collapse.Header>
        <Collapse.Body>
            {({ close }) => (
                <Button onClick={close}>Close</Button>
            )}
        </Collapse.Body>
      </Collapse>
    }

    Styling

    import React from 'react'
    import styled from 'styled-components';
    import Collapse from '@kaprisa57/react-collapse'
    
    const Header = styled(Collapse.Header)`
      padding: 10px;
      line-height: 20px;
      cursor: pointer;
      box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
      width: 100%;
    `;
    
    const Body = styled(Collapse.Body)`
      box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
      padding: 20px;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      width: 100%;
    `;
    
    const Content = styled.div`
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    `;
    
    function Example() {
      return <Collapse>
        <Header>Open</Header>
        <Body>
            <Content>:)</Content>
        </Body>
      </Collapse>
    }

    Custom Animation

    import React from 'react'
    import Collapse from '@kaprisa57/react-collapse'
    
    function Example() {
      return  <Collapse>
         <Collapse.Header>Open</Collapse.Header>
         <Collapse.Body animation={{
           initial: {
             opacity: 0,
           },
           animate: {
             opacity: 1
           },
           exit: {
             opacity: 0
           },
           transition: { duration: 0.1, ease: [0.3, 0.6, 0.3, 0.2] },
         }}>
           :)
         </Collapse.Body>
      </Collapse>
    }

    See more details in storybook

    License

    MIT © kaprisa57@gmail.com

    Install

    npm i @kaprisa57/react-collapse

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    12.4 kB

    Total Files

    3

    Last publish

    Collaborators

    • kaprisa57