react-size-transition

Gently transition the sizes of containers when their contents change.

Install

npm install --save react-size-transition

Usage

import React, { Component } from 'react';
import SizeTransition from 'react-size-transition';

// This example uses styled components, but you can use any CSS framework.
import styled from 'styled-components';

FadeText = styled.div`
  transition: 0.5s;
  opacity: 1;
  &.hidden { opacity: 0; }
`

class Example extends Component {
  render () {
    return (
      <SizeTransition>
        <FadeText>{this.props.fadeText}</FadeText>
      </SizeTransition>
    )
  }
}

How it works

Whenever the SizeTransition component is re-rendered with new content, the old children continue to be rendered, overlapping the new children, for a short while. A hidden class (the class name can be customized) is added to children to trigger transitions.

A typical lifecycle, showing initial rendering and an update:

| | First child | Second child | |-----------------------|-----------------------|-----------------------| | Initial render | Mounted with hidden | - | | Immediately after | hidden removed | - | | Content update | hidden added | Mounted with hidden | | Immediately after | - | hidden removed | | 1 second later | Unmounted | - |

Props

• transition: The transition CSS property applied on the resizing container. Default: 0.5s ease-in-out. Note that this must not be none. Old children are removed from the DOM when this transition ends.
• hiddenClassName: The class name to add to children that should be hidden.

Future work

Several additional features are required before we hit 1.0:

• Support custom alignment between old and new content (during the transition). Currently it is centered both vertically and horizontally.
• Separate the container size transition and the child entry/exit transition into separate components.

License

MIT © aravindet