use-d3-transition: React animations with 1 line of code

A custom React hook for D3 animations. Perfect for hefty data visualization projects. Or when you just need a quick animation.

No refactors. No messy class-based lifecycle hooks. Just dynamic animations and clean, modern React. 😎

Try it in CodeSandbox. 📝 Or read the juicy details on Medium. 📖

Inspired by Swizec Teller's blogpost.

Installation

npm install use-d3-transition
# or yarn:
yarn add use-d3-transition

Example

import React from 'react'
import useD3Transition from 'use-d3-transition'


export const TransitionableCircle = ({cx, cy, ...restOfTheAttributes}) => {
	const {ref, attrState} = useD3Transition({
		attrsToTransitionTo: {cx, cy}, // attributes to transition to smoothly
		deps: [cx, cy], // hook dependencies (typically identical to the attributes to transition to)
	})
	
	return (
		<circle
			{...restOfTheAttributes}
			
			ref={ref}
			cx={attrState.cx}
			cy={attrState.cy}
			
			
		/>
	)
}

Now you can use that component as you would a native SVG or HTML element, and the component will automatically transition itself between attribute changes.

<TransitionableCircle
	className={'my-transitioning-circle'}
	r={42}
	cx={updatingXValue}
	cy={updatingYValue}
/>

API

property	description	type	default	required?
attrsToTransitionTo	All the attributes you want to smoothly transition. Form: { attributeName: attributeEndValue, ... }	Object	-	required
deps	Identical to deps parameter in other React hooks (eg useMemo, useEffect)	Array	-	optional (technically)
attrsToTransitionFromInitially	Sometimes, you might want all attributes to transition in from a specific value (eg transition circle radius in from 0). List those start values here for each transitioning property. Form: { attributeName: attributeStartValue, ... }	Object	attrsToTransitionTo	optional
duration	Transition duration, in ms	Number	800	optional
easingFunction	A D3 easing function to fine tune the transition's progression	Function	d3.easeCubic	optional