@gnarlycode/react-styled-css-transition

GNARLY CODE Production Introducing

React Styled Css Transition

Helper function for using CSSTransition with Styled Components

Installation

npm i --save @gnarlycode/react-styled-css-transition

Usage

import { css } from 'styled-components'
import { styledCSSTransition } from '@gnarlycode/react-styled-css-transition'

const TransitionComponent = styledCSSTransition(
  {
    mountOnEnter: true,
    timeout: {
      enter: 100,
      exit: 100,
    },
    unmountOnExit: true,
    // any CSSTransitionProps
  },
  css`
    &.appear {}
    &.appear-active {}
    &.enter {}
    &.enter-active {}
    &.exit {}
    &.exit-active {}
  `,
)

Author: Dmitry Podlesny