react-collapse-transition

CollapseTransition component for React

Usage no npm install needed!

<script type="module">
  import reactCollapseTransition from 'https://cdn.skypack.dev/react-collapse-transition';
</script>

README

CollapseTransition

React collapse transition componnet.

Install

npm i react-collapse-transition

Usage

import React, { Component } from 'react'
import CollapseTransition from 'react-collapse-transition'

class Demo extends Component {
  state = {
    visible: true
  }

  toggle = () => {
    this.setState(state => {
      state.visible = !state.visible
      return state
    })
  }

  render() {
    return (
      <div className="menu">
        <p className="menu-title" onClick={this.toggle}>
          title
        </p>
        <CollapseTransition visible={this.state.visible}>
          <div className="menu-content">
            <p>content...</p>
            <p>content...</p>
            <p>content...</p>
            <p>content...</p>
            <p>content...</p>
          </div>
        </CollapseTransition>
      </div>
    )
  }
}

The result would be like:

react-collapse-transition

LICENSE

MIT