Skip to content

Instantly share code, notes, and snippets.

@christopherscott
Created September 20, 2018 14:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save christopherscott/0300ba0c96db6aaecd4599eb289c53fd to your computer and use it in GitHub Desktop.
Difference between react-spring and react-transition-group animated modals
import Component from "@reach/component-component";
import { Transition } from 'react-spring';
import { Transition as Transition2 } from 'react-transition-group';
import ReactDOM from 'react-dom';
import React from 'react';
import logo from './logo.svg';
import './App.css';
const style = {
padding: 10,
width: 400,
height: 200,
position: 'fixed',
top: 500,
left: 100,
background: 'gray',
boxShadow: '2px 2px rgba(0, 0, 0, 0.2)',
};
class MyPortal extends React.Component {
render() {
return ReactDOM.createPortal(
this.props.children,
document.querySelector('#portal'),
);
}
}
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}
const transitionStyles = {
entering: { opacity: 0 },
entered: { opacity: 1 },
};
class App extends React.Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<Component initialState={{ open: false }}>
{({ state, setState }) => (
<div>
<button onClick={() => setState({ open: !state.open })}>
toggle react-spring dialog
</button>
<Transition
from={{ opacity: 0, y: -10 }}
enter={{ opacity: 1, y: 0 }}
leave={{ opacity: 0, y: 10 }}
>
{state.open && (styles => (
<MyPortal>
<div style={{ ...style, opacity: styles.opacity }}>
hi, this is react-spring, the latest greatest animation library for react
</div>
</MyPortal>
))}
</Transition>
</div>
)}
</Component>
<Component initialState={{ open: false }}>
{({ state, setState }) => (
<div>
<button onClick={() => setState({ open: !state.open })}>
toggle react-transition-group dialog ({ state.open.toString() })
</button>
<Transition2
appear
in={state.open}
timeout={duration}
unmountOnExit
mountOnEnter
>
{(_state) => (
<MyPortal>
<div style={{
...style,
...defaultStyle,
...transitionStyles[_state],
}}>
<div>{_state}</div>
<div>
hi, this is react-transition-group-v2, forces you to provide a duration, wah wah
</div>
</div>
</MyPortal>
)}
</Transition2>
</div>
)}
</Component>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment