ferdaber/react-transient

Simple, elegantly declarative React component transitions. 🌬️

React-Transient

Install

NPM

npm install react-transient

import { Transition, TransitionGroup } from 'react-transient'
const Foo = () => (
    <Transition name='foo' mode='out-in'>
        {/*...*/}
    </Transition>
)

Unpkg

<script src="https://unpkg.com/react-transient/dist/react-transient.min.js"></script>

const { Transition, TransitionGroup } = ReactTransient
const Foo = () => React.createElement(Transition, {
    name: 'foo'
    mode: 'out-in'
}, /*...*/)

API

Documentation is coming soon! For now, please take a look at the source Typescript files for props definitions:

• Transition
• TransitionGroup (uses the same props as Transition with hardcoded appear set to true)

Examples

Transition Modes

• Fade Out -> Fade In
• Simultaneous Slide In & Slide Out
• Expand In -> Explode Out

Advanced

• Filtering with TransitionGroup
• Staggered Transition