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 ' 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 >

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 .