Lightweight, framework-agnostic JavaScript component library with progress gift components
npm install @gleb.askerko/componentkit-jsA lightweight, framework-agnostic JavaScript component library designed for modern web applications.
- ProgressGift Component: Gamified progress tracking with point accumulation and reward systems
- Framework Agnostic: Works with any web framework or vanilla JavaScript
- Lightweight: Minimal dependencies and small footprint
- Version Display: Built-in version indicator for debugging and compatibility
- Customizable: Flexible styling and configuration options
``bash`
npm install @gleb.askerko/componentkit-js
`javascript
import { ProgressGift } from '@gleb.askerko/componentkit-js';
// Create a progress gift component
const progressGift = new ProgressGift({
maxPoints: 100,
giftIcon: '🎁',
showVersion: true // Shows v1.0.0 in top-left corner
});
// Render to DOM
progressGift.render('#progress-container');
// Add points
progressGift.addPoints(25);
`
`javascript`
const progressGift = new ProgressGift({
maxPoints: 100, // Points needed for each gift
giftIcon: '🎁', // Gift emoji/icon
showVersion: true, // Show version badge (default: true)
className: 'custom-class' // Additional CSS classes
});
- render(selector) - Mount component to DOM elementaddPoints(amount)
- - Add points with animationrestart()
- - Reset component to initial stateinitProgressGift()
- - Initialize/reinitialize component
The component comes with built-in CSS classes that you can customize:
- .ck-progress-gift-wrapper - Main container.ck-progress-gift-bar
- - Progress bar.ck-progress-gift-fill
- - Progress fill.ck-progress-version
- - Version badge (top-left corner)
Every component displays its version (v1.0.0) in the top-left corner by default. This can be disabled by setting showVersion: false`.
- Modern browsers (ES6+ support)
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+
MIT License - see LICENSE file for details.