niflheim

Niflheim

A tiny, simple, and reliable way to animate mounting and unmounting components in React, with the abiity to reverse the direction of animation as required.

How to use

Install via npm i niflheim.

Choose whether you are going to be animating via the css transition property, or via css animation, and use the corresponding Niflheim Component to wrap the children you want to animate (Transitioned vs Animated).

As with all implementations of mounting transitions: ALL CHILDREN REQUIRE A UNIQUE MEANINGFUL key

Example

import {Animated, Transitioned} from 'niflheim'

// 'key' prop is essential
// Requires that your stylesheet contains classes for:
// .entering .exiting .before_enter .entered .after_exit
// Or you can provide your own classes (see API below)

const Suggestions = ({items}) =>
  <Animated As={'ul'}>
    {items.map(({name, id}) =>
      <li key={id} className={'listItem'}>{name}</li>
    )}
  </Animated>

const Autocomplete = ({items, category, query}) =>
  <Transitioned>
    <Suggestions
      key={category}
      items={items.filter(({name}) => name.includes(query))}
    />
  </Transitioned>

// When 'category' changes, the Suggestions view will transition out and a new one will transition in
// When the query is updated, items that are filtered out will animate out from the list

Shared API

Prop	Type	Default	Effect
As	string or Component	React.Fragment	What the children will be wrapped with
reverse	boolean	false	Whether the animation should be run in reverse
duration	number	500	How long your transition/animation takes (this should exactly match the duration + delay defined in your styles)

Animated API

Prop	Type	Default	Effect
entering	className string	'entering'	The class applied when the component mounts
entering_reverse	className string	'entering_reverse'	The class applied when the component mounts
exiting	className string	'exiting'	The class applied when the component unmounts
exiting_reverse	className string	'exiting_reverse'	The class applied when the component unmounts

It's worth noting that the entering classes are not removed until the component unmounts, so your css animation should not loop. If you don't plan on reversing your animation, you can ignore the _reverse props.

Transitioned API

Prop	Type	Default	Effect
before_enter	className string	'before_enter'	The class applied for 1ms when the component mounts
entered	className string	'entered'	The class applied 1ms after the component mounts (triggering the transition)
after_exit	className string	'after_exit'	The class applied when the component unmounts (triggering the transition)

Due to how css transitions work, your transition classes should define what the component should look like at the above points in time.

Hooks API

Niflheim also exports two hooks: useTransitioned and useAnimated.

import {useTransitioned, useAnimated} from 'niflheim'

const Component = ({prev, next, children}) => {
  const animatedChildren = useAnimated(children, {reverse: next < prev})
  return <div>{animatedChildren}</div>
}