use-d3-transition v1.2.0

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