Have ideas to improve npm?Join in the discussion! »

    use-d3-transition

    1.2.0 • Public • Published

    use-d3-transition-gif

    npm version

    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

    Install

    npm i use-d3-transition

    DownloadsWeekly Downloads

    22

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    5.26 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar