react-transitioning

A library that provides React components for managing animations and transitions with ease. It allows seamless transitions for both individual components and groups of elements. Lightweight and has no dependencies. Inspired by react-transition-group and has almost the same API.

<FadeTransition in={visible}>
  <div>Fading element</div>
</FadeTransition>

Key Features

• Built with functional components and hooks, avoiding deprecated methods like findDOMNode.
• Unlike react-transition-group, there's no need to pass a nodeRef prop.
• Supports both CSS-based and inline style-based transitions.
• Minimal bundle size.
• No dependencies.

Installation

To install react-transitioning, run the following command in your project:

npm install react-transitioning
# or
yarn add react-transitioning

Documentation

For more detailed information and usage examples, check out the Docs.

Quick Review

Transition Component

The Transition component allows you to control the mounting and unmounting of an element with transitions.

import { Transition } from 'react-transitioning'

...

<Transition in={visible} appear exit={false}>
  {(transitionState) => (
    <pre>{JSON.stringify(transitionState)}</pre>
  )}
</Transition>

CSSTransition Component

The CSSTransition component applies CSS classes based on the current transition state.

import { CSSTransition } from 'react-transitioning'

...

<CSSTransition in={visible} classNames="fade">
  <div>Animated element</div>
</CSSTransition>

StyleTransition Component

The StyleTransition component applies inline styles based on the current transition state. This is useful for customizing transitions without needing to rely on external CSS.

import { StyleTransition } from 'react-transitioning'

...

<StyleTransition 
  in={visible} 
  duration={300} 
  styles={{
    enter: { opacity: 0 },
    enterActive: { opacity: 1 },
  }}
>
  <div style={{ transition: 'opacity 300ms' }}>Animated element</div>
</StyleTransition>

TransitionGroup Component

The TransitionGroup component handles a set of elements, animating them as they are added or removed from the DOM.

import { TransitionGroup } from 'react-transitioning'

...

<TransitionGroup duration={300}>
  {items.map((item) => (
    <CSSTransition key={item.key} classNames="fade">
      <div>{item.label}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

Component Props

TransitionProps

type TransitionProps = {
  children: React.ReactNode | ((transitionState: TransitionState, activePhase: TransitionPhase) => React.ReactNode);
  in?: boolean;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
  duration?: number;
  alwaysMounted?: boolean;
  addEndListener?: (phase: TransitionPhase, done: () => void) => void;
  onEnter: () => void;
  onEntering: () => void;
  onEntered: () => void;
  onExit: () => void;
  onExiting: () => void;
  onExited: () => void;
}

The TransitionState passed to the children function has the following structure:

type TransitionState = {
  appear: boolean;
  appearActive: boolean;
  appearDone: boolean;
  enter: boolean;
  enterActive: boolean;
  enterDone: boolean;
  exit: boolean;
  exitActive: boolean;
  exitDone: boolean;
}

CSSTransitionProps

type CSSTransitionProps = Omit<TransitionProps, 'children'> & {
  children: React.ReactElement<{ className?: string }>
  classNames: string | {
    appear?: string;
    appearActive?: string;
    appearDone?: string;
    enter?: string;
    enterActive?: string;
    enterDone?: string;
    exit?: string;
    exitActive?: string;
    exitDone?: string;
  }
}

if classNames is a string, then the computed class name will be suffixed based on the current transition state. For example, when classNames is "fade", the "fade-appear-active" class will be applied during the appearActive phase.

If classNames is an object, the final class name will be taken from that object based on the current transition state.

StyleTransitionProps

type StyleTransitionProps = Omit<TransitionProps, 'children'> & {
  children: React.ReactElement<{ style?: React.CSSProperties };
  styles: {
    appear?: object;
    appearActive?: object;
    appearDone?: object;
    enter?: object;
    enterActive?: object;
    enterDone?: object;
    exit?: object;
    exitActive?: object;
    exitDone?: object;
  }
}

The styles prop allows you to define inline styles based on the current transition state. For example, when the element enters, the enterActive styles will be applied.

TransitionGroupProps

type TransitionGroupProps = {
  children: React.ReactNode;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
  duration?: number;
}

License

MIT