React-transition-group: How to use with CSS Modules ?

[vedimension]

I have a CSSTransition and Im using with CSS Modules. However, I dont know how to use it.

the jsx file

import React, { Component } from "react";
import styles from "./style.scss";
import { Route, Switch, withRouter } from "react-router-dom";
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import Navigation from "./views/navigation";
import ViewIndex from "./views/viewIndex";
import About from "./views/about";
import DatePickerView from './views/datepickerView.jsx';

@withRouter
export default class Routers extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {location} = this.props
    const currentKey = location.pathname.split("/")[1] || "/";
    const timeout = { enter: 300, exit: 200 };

    return (
      <div className={styles.view}>
        <TransitionGroup>
          <CSSTransition
            key={currentKey}
            timeout={timeout}
            classNames="fade"  //classnames here, what should i do?
            appear
          >
            <Switch location={location}>
              <div className={styles.h100} key={location.path}>
              <Route key={location.key} location={location} component={ViewIndex} path="/" exact />
              <Route key={location.key} location={location} component={DatePickerView} path="/datepickerview" />
              <Route key={location.key} location={location} component={About} path="/about" />
              </div>
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
    )
  }
}

the scss file (using css modules)

.fade-appear,
.fade-enter {
  opacity: 0;
}

.fade-appear-active,
.fade-enter-active {
  transition: opacity .3s linear;
  opacity: 1;
}

.fade-exit {
  transition: opacity .2s linear;
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
}

[jquense]

import your classes and add them to the prop,

import styles from './fade.css';
...
classNames={{
  enter: styles.fadeEnter,
  enterActive: styles.fadeEnterActive.
}}

its even easier if you have auto camelcasing turned on (in css modules), you can name your classes enter, enter-active, etc and then do classNames={styles} since the object will already be the right shape

[vedimension]

@jquense thanks 👍

[dnorth]

I thought i had to use :global(.xxx) at first... glad I stumbled on this. Thanks @jquense

[chenop]

Its worth noting that you need to add all the events (not just enter & enterActive)

<CSSTransition
    key={index}
    timeout={500}
    classNames={{
        appear: styles['fade-appear'],
        appearActive: styles['fade-appear-active'],
        enter: styles['fade-enter'],
        enterActive: styles['fade-enter-active'],
        enterDone: styles['fade-enter-done'],
        exit: styles['fade-exit'],
        exitActive: styles['fade-exit-active'],
        exitDone: styles['fade-exit-done']
    }}
    appear
>
    {item}
</CSSTransition>

[silvenon]

To make your life easier, I suggest writing those class names in camelCase, that way you could simply spread them:

classNames={{ ...styles }}