@usertive/react-fluid-animation
v1.0.5
Published
Fluid media animation for React powered by WebGL.
Downloads
47
Maintainers
Readme
Installation
npm install @usertive/react-fluid-animation
or
yarn add @usertive/react-fluid-animation
Usage
Check out the demo.
import ReactFluidAnimation from '@usertive/react-fluid-animation';
export default function App() {
return (
<ReactFluidAnimation />
);
}
Usage with server-side rendering
This package works only on client side because it depdends on WebGL technology.
We need to load package dynamically after the hydration process is complete.
Let's see how this can be done:
const DynamicAnimation = dynamic(() => import('@usertive/react-fluid-animation'));
export default function App() {
const [isAfterHydration, setIsAfterHydration] = useState<boolean>(false);
useEffect(() => {
if (!isAfterHydration) setIsAfterHydration(true);
}, [isAfterHydration, setIsAfterHydration]);
return isAfterHydration ? <DynamicAnimation /> : null;
}
This workaround give us the opportunity to dynamically load the component and mount it right after hydration is complete to get around hydration errors from React.
Props & types
Props of the ReactFluidAnimation
component:
export interface Props {
config?: IAnimationConfig; // animation config
style?: object; // styles object passed to container <div>
animationRef?: (animation: Animation) => void, // function to capture animation object
}
Animation config
This options can be tweaked on the demo site.
export interface IAnimationConfig {
textureDownsample: number;
densityDissipation: number;
velocityDissipation: number;
pressureDissipation: number;
pressureIterations: number;
curl: number;
splatRadius: number;
}
Animation object
export class Animation {
config: IAnimationConfig; // current config of the animation
width: number; // width of the canvas
height: number; // height of the canvas
addRandomSplats(count: number): void; // function to apply random splats on screen
}