v5.0.2 - Jest Compatibility & Clean Exports

🧪 Jest Compatibility & Export Improvements

Fixed

• 🔧 Jest Compatibility: Added CommonJS build alongside ESM for seamless Jest/testing integration
• 📦 Dual Module Export: Package now provides both ESM (index.js) and CJS (index.cjs) formats
• ✅ Zero Configuration: Works out-of-the-box with Jest in Next.js 16+, Create React App, and other environments
• 🎯 Clean Exports: Removed mixed named/default exports warning for better consumer experience

Changed

• Build Output: Now generates both dist/index.js (18.88 kB ESM) and dist/index.cjs (12.76 kB CJS)
• Package Exports: Updated package.json with proper dual module export configuration
• Export Pattern: Adopted named-only export pattern (modern best practice)

Technical Details

This release resolves cannot find module errors when running Jest tests in Next.js and other environments. The package now automatically works with both ESM and CommonJS module systems without requiring any consumer configuration.

Installation

npm install @dev-ahmed-mahmoud/react-custom-scrollbars

Usage

import { Scrollbars } from '@dev-ahmed-mahmoud/react-custom-scrollbars'

function App() {
  return (
    <Scrollbars style={{ height: 300 }}>
      <div>Your content here</div>
    </Scrollbars>
  )
}

Package Links

• 📦 npm Package
• 📚 Documentation
• 🐛 Report Issues

---

Full Changelog: v5.0.1...v5.0.2

v5.0.1 - Documentation & Package Visibility Fix

📝 Documentation & Package Visibility

Fixed

• 📝 Documentation: Updated README with correct scoped package name and installation instructions
• 🔗 Package Links: Fixed npm badges and import examples
• 🎯 Package Visibility: Enhanced package discoverability with proper badges and links

Installation

npm install @dev-ahmed-mahmoud/react-custom-scrollbars

Package Links

• 📦 npm Package
• 📚 Documentation

---

Full Changelog: v5.0.0...v5.0.1

🚀 react-custom-scrollbars v5.0.0 - Modern React 19 + TypeScript

🚀 react-custom-scrollbars v5.0.0

A complete modernization of the beloved React scrollbars library, now with React 19 support, TypeScript, and modern hooks!

🎯 Quick Start

npm install @dev-ahmed-mahmoud/react-custom-scrollbars

import { Scrollbars } from '@dev-ahmed-mahmoud/react-custom-scrollbars'

function App() {
  return (
    <Scrollbars style={{ width: 500, height: 300 }}>
      <p>Your content here...</p>
    </Scrollbars>
  )
}

✨ What's New in v5.0

🔥 Major Modernization

• React Hooks: Complete rewrite with modern React patterns
• TypeScript First: Written in TypeScript with comprehensive type definitions
• React 18/19 Support: Full compatibility with the latest React versions
• Vite Build System: Lightning-fast development and optimized production builds
• Modern Testing: Vitest + React Testing Library for reliable testing

📦 Enhanced Developer Experience

• Zero Runtime Dependencies: Lightweight with no external dependencies
• Bundle Optimization: ~18KB (5.4KB gzipped) - smaller than v4
• ESLint 9: Modern flat config with TypeScript rules
• GitHub Actions: Automated CI/CD pipeline

🎨 Restored Features

• ✅ autoHideTimeout prop: Previously missing, now fully implemented
• ✅ onScrollStart/onScrollStop: Enhanced scroll detection with 150ms timeout
• ✅ All v4.x APIs: Maintained for seamless migration

🛡️ Quality Assurance

• 100% Test Coverage: Comprehensive testing with modern tools
• Type Safety: Full TypeScript support prevents runtime errors
• Security: Zero vulnerabilities, secure by design
• Performance: Optimized for 60fps scrolling with RAF

🔄 Migration from v4.x

Your existing code mostly works as-is! Just change the import:

- import { Scrollbars } from 'react-custom-scrollbars'
+ import { Scrollbars } from '@dev-ahmed-mahmoud/react-custom-scrollbars'

Breaking Changes:

• Minimum Node.js: 20.0.0 (was 6.x)
• Minimum React: 18.0.0 (was 15.x)
• ES modules only (no CommonJS)

📖 Full Migration Guide

🎯 TypeScript Support

import { 
  Scrollbars, 
  ScrollbarsRef, 
  ScrollValues,
  ScrollbarsProps 
} from '@dev-ahmed-mahmoud/react-custom-scrollbars'

function MyComponent() {
  const scrollbarsRef = useRef<ScrollbarsRef>(null)
  
  const handleScrollFrame = useCallback((values: ScrollValues) => {
    console.log('Scroll position:', values.top)
  }, [])
  
  return (
    <Scrollbars
      ref={scrollbarsRef}
      onScrollFrame={handleScrollFrame}
      onScrollStart={() => console.log('Started scrolling')}
      onScrollStop={() => console.log('Stopped scrolling')}
      autoHide
      autoHideTimeout={1000}
    >
      {content}
    </Scrollbars>
  )
}

📊 Performance Comparison

Metric	v4.2.1	v5.0.0	Improvement
Bundle Size	~25KB	~18KB	📉 28% smaller
Dependencies	3	0	🎯 Zero deps
TypeScript	❌	✅	🚀 Built-in
React 19	❌	✅	🆕 Future-ready
Node.js	6+	20+	⚡ Modern runtime

🧪 Testing & Quality

• 5/5 tests passing with comprehensive coverage
• Zero ESLint warnings with modern flat config
• Clean TypeScript compilation with strict settings
• Zero security vulnerabilities with npm audit

📚 Documentation

• 📖 API Reference
• 🎨 Customization Guide
• 🔧 Usage Examples
• 🆙 Migration Guide

🙏 Credits

• Original Library: Created by Malte Wessel - Thank you for the amazing foundation!
• v5.0 Modernization: Maintained by Ahmed Mahmoud
• Community: Thanks to all contributors and users of the original library

💝 Support the Project

If this library helps your project, consider:

• ⭐ Star the repository
• 🐛 Report issues and help improve the library
• 🔧 Contribute with PRs for new features or fixes
• 📢 Share with the React community

📄 License

MIT © Ahmed Mahmoud

Original work © Malte Wessel

---

Package: @dev-ahmed-mahmoud/react-custom-scrollbars
Repository: GitHub
npm: npm install @dev-ahmed-mahmoud/react-custom-scrollbars