limerentfox / react-transition-factory

💃 Create easily configurable animation / transition components

React Transition Factory

A component factory for generating easily configurable <Transition> components from react-transition-group without the boilerplate.

React Transition Factory is roughly 3 kB gzipped, and has peer dependencies on react and react-transition-group.

npm i react-transition-factory

Motivation

The drive behind react-transition-factory comes from being able to create common transition components for React easily using the tried and true react-transition-group.

Not only that, but these components need to be easily configurable with a simple API, and minimal context switching.

One of the easiest and most common ways to add a enter/exit transition is using <CSSTransition> from react-transition-group. However the downfalls of that API is having to create a React component and maintaining separate CSS classes to express your enter/exit states. Not only that, but dynamically changing the duration and easing in your CSS is nearly impossible without additional tooling. This is even harder to manage if you are transitioning on multiple CSS properties at once.

The other way to add a transition is using <Transition> from react-transition-group, which allows us to express our transitions using React inline styles. This solves our previous issue since we can dynamically generate all of our styles in JavaScript and not have to maintain a static CSS stylesheet. However there is decent amount of configuration needed, of which you need to know the different transition styles of your component which includes your default style, the entering style, entered style and exiting style.

The transitionFactory aims to solve that by wrapping <Transition> and providing a very simple API for allowing you to express a transition in less than 10 lines of code in the simpliest case.

const ScaleTransition = transitionFactory(
  {
    transition: 'transform',
    getStartStyle: (start = 0) => `scale(${start})`,
    getEndStyle: (end = 1) => `scale(${end})`,
  }
);

And you're done!

API

transitionFactory(transitionConfigs: Arguments<TransitionConfig>): React.Component<TransitionProps>

The transitionFactory component factory returns a pre-configured <Transition> component given the TransitionConfig(s) from the transitionConfigs array.

A TransitionConfig has the following shape:

type TransitionConfig = {
  transition: string,
  getStartStyle: Function,
  getEndStyle: Function,
}

// example
const config: TransitionConfig = {
  transition: 'transform',
  getStartStyle: (start = 0) => `scale(${start})`,
  getEndStyle: (end = 1) => `scale(${end})`,
}

It's recommended you pass in default parameters for the functions for getStartStyle and getEndStyle. These will be the default values, which can be overridden by this.props.start and this.props.end in your component. In the end, what is returned by the function is up to you, as long as it is valid CSS.

You can also pass down a style prop to apply any additional CSS styles you need to persist across all your transition states. Some common CSS properties you may want to persist include display and transformOrigin which can affect your transition.

const RandomTransition = transitionFactory(
  ...
);

return (
  <RandomTransition style={{ transformOrigin: 'top' }}>
    {...}
  </RandomTransition>
);

The following are all of the props that are supported by react-transition-factory.

export type TransitionProps = {
  children: Node,
  start?: string | number | Array<string | number>,
  end?: string | number | Array<string | number>,
  timeout: number | Array<number>,
  easing: string | Array<string>,
};

Presets

react-transition-factory comes out of the box with some common presets, if you want to compose your own transition components quickly.

• opacity
• rotate
• rotate3d { top, bottom, left, right }
• translate { top, bottom, left, right }
• scale { all, vertical, horizontal }

Example

import transitionFactory from 'react-transition-factory';
import { opacity, rotate, scale } from 'react-transition-factory';

const BatmanWipeTransition = transitionFactory(
  opacity,
  rotate,
  scale.all,
);

Components

For those who want to get up and running quickly, please check out react-transition-components for a component library created using react-transition-factory of common use case transitions: https://github.com/Setsun/react-transition-components