https://github.com/ricsam/react-transition-collapse

Performant accordion/collapse react component powered by css transitions and css transform for the animation.
https://github.com/ricsam/react-transition-collapse

Last synced: 10 days ago
JSON representation

Performant accordion/collapse react component powered by css transitions and css transform for the animation.

• Host: GitHub
• URL: https://github.com/ricsam/react-transition-collapse
• Owner: ricsam
• License: mit
• Created: 2019-03-18T15:38:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T11:33:28.000Z (over 1 year ago)
• Last Synced: 2024-08-10T11:30:38.509Z (3 months ago)
• Language: TypeScript
• Homepage: https://ricsam.github.io/react-transition-collapse/
• Size: 1.81 MB
• Stars: 1
• Watchers: 0
• Forks: 2
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: code-of-conduct.md

Awesome Lists containing this project

README

        
# react-transition-collapse

Performant animated accordion/collapse react component powered by css transitions and css transform.

[1]: https://www.npmjs.com/package/react-transition-collapse

[2]: https://img.shields.io/npm/v/react-transition-collapse.svg

| npm | build |

| ----|------ |

| [![npm][2]][1] | ![travis](https://travis-ci.org/ricsam/react-transition-collapse.svg?branch=master) |

### Installation

```bash

npm install --save react-transition-collapse

```

```bash

yarn add react-transition-collapse

```

### Usage

ReactTransitionCollapse takes these props:

```

children: Element

duration: number | string // number of milliseconds

expanded: boolean

animationType: 'scale' | 'translate' // which css transform should be applied to animate the transition

```

#### Full example

```jsx

import React, { useState } from 'react'

import ReactTransitionCollapse from 'react-transition-collapse'

export const Expandable = () => {

  const [expanded, setExpanded] = useState(false)

  return (

    <>

       setExpanded(expanded => !expanded)}>Expand

      


        

          Lorem nostrud velit ullamco dolore exercitation consectetur occaecat enim laboris cillum

          incididunt ullamco ex. Adipisicing eu nulla anim laborum. Exercitation consequat anim

          culpa aute fugiat dolor in aliqua Lorem labore mollit anim id dolore. Sunt ut sunt duis

          commodo irure dolore adipisicing occaecat non nisi sit. Labore consequat amet anim nulla

          ipsum excepteur do duis labore.

        

      

    >

  )

}


```

### NPM scripts

 - `npm t`: Run test suite

 - `npm start`: Run `npm run build` in watch mode

 - `npm run test:watch`: Run test suite in [interactive watch mode](http://facebook.github.io/jest/docs/cli.html#watch)

 - `npm run test:prod`: Run linting and generate coverage

 - `npm run build`: Generate bundles and typings, create docs

 - `npm run lint`: Lints code

 - `npm run commit`: Commit using conventional commit style ([husky](https://github.com/typicode/husky) will tell you to use it if you haven't :wink:)