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. :sunglasses:

Try it in CodeSandbox. :pencil: Or read the juicy details on Medium. :open_book:

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 |