velocity-react provides a set of React components designed to integrate the Velocity.js DOM animation library into React applications. Key components include `VelocityComponent` for animating a single child, and `VelocityTransitionGroup` for managing animations during component mounting, unmounting, and updates. The current stable version is v1.4.3, released in May 2019. This package acts as a bridge, allowing React developers to leverage Velocity.js's performance and declarative API within their component-based UIs, contrasting with CSS-based animations or other JavaScript animation libraries by providing a more direct imperative control over DOM animations through React props. Its release cadence has been very slow, with no updates since 2019, strongly suggesting it is no longer actively maintained.
Install & Compatibility
Where this runs
No compatibility data collected yet for this library.
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
While the package uses CommonJS internally, modern build setups (e.g., Webpack, Vite) allow named ES module imports to function correctly. Avoid direct CommonJS `require` in new code unless strictly necessary.
import { VelocityComponent } from 'velocity-react';
This is a named export, not a default export. Ensure you destructure it correctly when importing.
import { VelocityTransitionGroup } from 'velocity-react';
Utility functions are exported alongside components from the main package entry point.
import { velocityHelpers } from 'velocity-react';
Demonstrates a basic `VelocityComponent` animating a box's opacity and horizontal position based on a state change, including explicit Velocity.js loading instructions for proper function.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { VelocityComponent } from 'velocity-react';
// IMPORTANT: Ensure Velocity.js and its UI pack are loaded globally or via your bundler
// In a typical application entry point (e.g., index.js, App.js), you would add:
// require('velocity-animate');
// require('velocity-animate/velocity.ui'); // If you plan to use UI pack effects
function AnimatedBox() {
const [isVisible, setIsVisible] = useState(true);
return (
<div style={{ padding: '20px' }}>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle Animated Box
</button>
<VelocityComponent
animation={isVisible ? { opacity: 1, translateX: 0 } : { opacity: 0, translateX: 50 }}
duration={500}
easing="ease-in-out"
runOnMount={true} // Animates on initial mount
>
<div
style={{
width: '120px',
height: '120px',
backgroundColor: '#61dafb',
marginTop: '20px',
borderRadius: '10px',
display: isVisible ? 'flex' : 'none', // Use display: 'none' to remove from flow when hidden
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontSize: '18px',
fontWeight: 'bold'
}}
>
Velocity Box
</div>
</VelocityComponent>
</div>
);
}
// Standard ReactDOM rendering setup for a client-side application
const rootElement = document.getElementById('root');
if (!rootElement) {
const newRoot = document.createElement('div');
newRoot.id = 'root';
document.body.appendChild(newRoot);
}
// For React 18+, use createRoot. For compatibility, this example uses ReactDOM.render.
ReactDOM.render(<AnimatedBox />, document.getElementById('root'));
Upgrade
Version history
Breaking-change detection hasn't run for this library yet.
Audit
Security & dependencies
CVE tracking and dependency tree are planned for a later release.
Agent activity
0 hits · last 30 days
No traffic data recorded yet.