React-transition-group: How to install this?

[studioraygun]

I've tried cloning this repo but get:

Permission denied (publickey).

[studioraygun]

Following on from this I installed it using npm install react-transition-group --save

Am importing using:

import { CSSTransition, TransitionGroup } from 'react-transition-group';

Then using it:

const PageFade = (props) => ( <CSSTransition {...props} classNames="fadeTranslate" timeout={1000} mountOnEnter={true} unmountOnExit={true} /> )

And get this error:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

The highlighted error is on <CSSTransition ...

[studioraygun]

I've genuinely spent about 2 hours trying to install and use this but whatever I try CSSTransition seems to fail to load - like it cannot be found. Tried adding to existing project and tried with a new install of React, both produce same error :-/

[jquense]

I'm sorry this is giving you so much trouble. I'm not sure why you are running into issues but code you've posted is correct. Most likely you have something configured wrong with your bundle or build setup. You can also use browser build file in the /dist directory of the npm package or the repo here. (btw the clone issue you have is a problem in how you have git setup)

[Krzyku]

@jquense probably I have similar problem.

Problem 1
I can't import components using import { CSSTransition } from "react-transition-group". Only import CSSTransition from "react-transition-group/CSSTransition" works. It's may be a problem with TypeScript types :/

Problem 2
CSSTransition and TransitionGroup are undefined :( Only typeof Transition === function and this component works fine.

UPDATE
All works fine for import * as TransitionGroup from "react-transition-group/TransitionGroup"

[axe-z]

is this really the official animation library ?
The demo TodoList does not work, giving me React.createElement: type is invalid and so on ...

Am I really at the right place ? does this really work ? React docs sent me here , this is a mess..

[jquense]

It works fine and used by tons of people. I'm sorry your running into trouble, if your using typescript we don't control the type definitions those are made by other folks so I can't speak to whether they work

[jquense]

Also I'm not sure what your talking about with the todo example, it's working correctly without errors in any browser I've managed to test it in...

[axe-z]

well the facebook react docs sends me there : https://github.com/reactjs/react-transition-group/tree/v1-stable

that first exemple does not work at all.

[axe-z]

not using typescript , usual wp3-babel CRA setup, i'm not new to react.

[jquense]

That's a pretty old version, and the example was from the old react addon. I'm not sure it is meant to be copy and pasted (I didn't write it) but it looks like it would work provided you have the right css

[axe-z]

is there a recent documentation with exemples somewhere else ? that 'sthe facebook link
I had does class in :

.example-enter {
opacity: 0.01;
}

.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}

.example-leave {
opacity: 1;
}

.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
it should have worked ?

[jquense]

There is the documentation site linked in the Readme and repo header.: https://reactcommunity.org/react-transition-group/

[axe-z]

So if I just wanted to use hooks for GSAP ,
componentWillAppear()
componentWillAppear()
componentDidEnter()
componentWillLeave()
componentDidLeave()

these are all gone in V2 ? and it's no longer a solution for gsap ?
Documentation in V2 is really hard to follow btw.

[uuau99999]

@axe-z Hey I'm from 2019 and I'm pretty sure that import way like "import { CSSTransition } from 'react-transition-group';" does not work at all while using with typescript 3.3.1.

[axe-z]

me from 2019 no longer cares ;)

[silvenon]

@uuau99999 I don't use TypeScript, but what do you mean that it importing components like that doesn't work at all?

[uuau99999]

import { CSSTransition } from 'react-transition-group'; can not import CSSTransition as expected. I just got an error 'can not read property CSSTransition of undefined'. So I'm guessing that maybe such import does not work in typescript.

[silvenon]

Can't TS infer those from our exports? Because our exports are valid. AFAIK there are no TS typings for this library, does that break TS?

[Kamyil]

Types are completely fine. In your README.md you suggest to install this package with 1.x version
npm install [email protected] --save

and types by default (if you install them with npm i @types/react-transition-group) are being installed with 4.x version which relates to 4.x version of your package, not 1.x. Update the documentation please or write in readme why do you suggest installing 1.x version of this package.
Anyway... installing this package with normal npm i react-transition-group (which in my case installs 4.4.1 version) command solves the problem

[silvenon]

Where do we suggest installing version 1? For TS we suggest installing @types/react-transition-group, like you said, and that's it. Did I miss something?