Is there a way to dynamically set className with css module? To be used with CSSTransition library

Question

So I'm trying to use the CSSTransition library in addition to React CSS Module and was wondering if it was possible to dynamically create the className to abstract the transitional classes into a hook. I know the method mentioned in this answer work, but was wondering if there is an easier way to do so (e.g. using a hook that takes in a 2 argument, name and styleSheet, then somehow return an object {onEnter:styleSheet.nameOnEnter} that I could just use the spread syntax to copy into a className property)

Answer 1

You can use [ ] instead of " . " to set dynamic class in css module:

import styles from './*/App.module.css'
const App= () => {
  return (
    <div className={styles[App]}>
      Hello world
    </div>
  );
};

export default App;