https://github.com/team-griffin/react-transition

https://github.com/team-griffin/react-transition

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/team-griffin/react-transition
• Owner: team-griffin
• Created: 2019-12-23T10:50:42.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-18T22:32:19.000Z (about 4 years ago)
• Last Synced: 2024-11-09T21:49:49.584Z (about 2 months ago)
• Language: TypeScript
• Size: 424 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-transition

Basic usage:

```tsx

import Transition from '@team-griffin/react-transition';

  

```

It also works out the box with list-style children:

```tsx

  

  

  

```

It's important to provide a key for each child as we use this to determine which list items have updated between renders.

## props

### duration

The animation duration. Defaults to `250`.

```tsx

  

```

### render

This is a render function that actually sets the css styles. It is given the following props:

```ts

{

  enter: boolean, // true when the component is first mounted

  entering: boolean, // true during the transition period

  entered: boolean, // true when the transition period has ended

  leave: boolean, // true when the component is about to unmount

  leaving: boolean, // true during the transition period

  left: boolean, // true when the component has unounted

  duration: number,

  children: ReactNode,

}

```

A typical example of a render function would look something like this:

```tsx

const render = ({

  enter,

  entering,

  entered,

  leave,

  leaving,

  left,

  children,

  duration,

}) => {

  const styles = {

    transition: `all ${duration}ms`,

    opacity: (entering || entered || leave) ? 1 : 0,

  };

  return 
{children}

};


  

```

### component

An element must wrap the transition in order to track the dom state. You can pass in a string for a native dom elment i.e. `span` or `div`.

```tsx

  

```

If you want to pass in a component, you need to be able to accept a `ref` and apply it to an element. For example:

```tsx

import { forwardRef } from 'react';

const Wrapper = forwardRef(({ children }, ref) => (

  


    {children}

  

))

```


So what makes this different to other transition libraries? It all lies in the unmounting logic. If you drop a component, usually the component is retained and rendered with the previous props for the duration of the transition. However, this all falls apart when you have nested components that have their own state or rely on redux state.

```tsx

  

```

If your child component assumes it will only be rendered when certain global state is set, then if you continue to re-render it during a transition phase, when the global state is no longer available, it wall probably collapse.

We actually get around this problem by stashing the child's dom node, and rendering a static version of the component when it unmounts. Magic.