v1.1.0 - Toggle Mode 🔘

v1.1.0 - Toggle Mode 🔘

🚀 New Features

🔘 Toggle Mode - Transform buttons into interactive toggle switches with persistent pressed states

• toggle prop to enable toggle/switch functionality
• defaultActive prop for uncontrolled toggle state
• onChange callback for toggle state changes
• active prop for controlled mode support
• Works seamlessly with all button variants and themes
• Smooth animations without initial render flash

🐛 Bug Fixes

• 🎨 Fixed SVG icon color inheritance - Icons now properly inherit text color using currentColor
• ⚡ Fixed initial render flash for buttons with defaultActive={true}
• 🖌️ Fixed icon fill color issues across different button types

📚 Documentation

• Added comprehensive toggle mode examples in README
• Added toggle showcase page in demo app
• Updated API reference with toggle props
• Added controlled and uncontrolled usage examples

🔗 Links

• 📦 npm package
• 💻 Live Demo
• 🔘 Toggle Examples

📦 Installation

npm install react-3d-button@1.1.0

⭐ Quick Example

import { Button3D } from 'react-3d-button';
import 'react-3d-button/dist/styles.css';

const [notifications, setNotifications] = useState(true);

<Button3D
  type="success"
  toggle
  active={notifications}
  onChange={setNotifications}
>
  {notifications ? '✓ ON' : 'OFF'}
</Button3D>

🎯 Toggle Mode Use Cases

• Settings Panels - Dark mode, notifications, wifi toggles
• Feature Flags - Enable/disable application features
• Form Inputs - Binary choices with visual feedback
• Status Indicators - Show on/off states
• Interactive UI - Any switch/toggle interaction

📝 Breaking Changes

None - This is a backward compatible feature addition.

🙏 Credits

Thank you to all users who requested toggle functionality!

v1.0.4 - TypeScript Improvements & Better Developer Experience

Release v1.0.4 - TypeScript Improvements & Better Developer Experience

🎯 What's New

This release focuses on improving TypeScript support, fixing autocomplete issues, and enhancing overall developer experience.

✨ Improvements

🔧 TypeScript & Autocomplete

• Fixed type prop autocomplete - Now properly suggests all 9 button variants (primary, secondary, tertiary, success, error, warning, info, anchor, danger) in your IDE
• Added size prop autocomplete - Get suggestions for 'small', 'medium', 'large' while still allowing custom string values
• Improved type safety - Replaced all any types with proper TypeScript types throughout the codebase

🛡️ Type Safety Enhancements

• helpers.ts improvements
  • Added proper Record<string, string> types for CSS modules
  • Made POSITION_STATES a const assertion for better type inference
  • Added explicit return types to all functions
  • Improved null safety checks
• Button3D.tsx improvements
  • Changed element prop from complex ForwardRefExoticComponent to simpler React.ElementType
  • Added strict type for setCssEndEvent parameter: 'transition' | 'animation'
  • Better type definitions for cssModule prop

🐛 Bug Fixes

• Fixed memory leak in setCssEndEvent helper function
  • Added proper cleanup of event listeners
  • Implemented resolved flag to prevent double resolution
  • Ensures timeout is cleared when promise resolves early

📦 Package Optimization

• Added .npmignore - Extra safeguard to exclude unnecessary files from npm package
• Better exports - Added named export alongside default export for Button3D

  // Both import styles now work
  import Button3D from 'react-3d-button'
  import { Button3D } from 'react-3d-button'

🎨 Developer Experience

• Better IDE support - IntelliSense now shows all available props with proper types
• Improved error messages - TypeScript will catch more issues at compile time
• Consistent type annotations - More maintainable codebase

📊 Impact

• ✅ No breaking changes - Fully backward compatible
• ✅ Better autocomplete - IntelliSense works perfectly for type and size props
• ✅ Type safety - Eliminated all any types for better compile-time checks
• ✅ Memory safety - No more potential event listener leaks
• ✅ Smaller package - Optimized with .npmignore

🔄 Migration Guide

No migration needed! This release is 100% backward compatible. Just update:

npm update react-3d-button
# or
yarn upgrade react-3d-button
# or
pnpm update react-3d-button

📝 Full Changelog

Changed

• Improved type prop definition - removed generic string to enable autocomplete
• Enhanced size prop with predefined values ('small' | 'medium' | 'large')
• Upgraded all helper functions with proper TypeScript types
• Simplified element prop type for better compatibility

Fixed

• Memory leak in setCssEndEvent with proper cleanup
• Event listener accumulation in long-running applications
• Null/undefined edge cases in helper functions

Added

• .npmignore file for package size optimization
• Named export for Button3D component
• React type imports in helpers.ts
• Comprehensive type annotations throughout

🙏 Credits

Thanks to everyone using react-3d-button! These improvements were driven by community feedback and usage patterns.

📦 Install

npm install react-3d-button@1.0.4

🔗 Links

• 📚 Documentation
• 📦 npm Package
• 🐛 Report Issues
• 💬 Discussions

React 3D Button v1.0.3

🎉 React 3D Button v1.0.3

A beautiful, customizable 3D button component for React with Next.js support, multiple themes, and easy CSS variable customization.

�� Live Demo & Documentation →

✨ What's New in v1.0.3

🎨 Enhanced Theme System

• Scoped theme support - Apply different themes to different sections of your app
• All 5 pre-built themes now properly scoped with class names (.theme-ocean, .theme-sunset, etc.)
• Fixed theme CSS specificity issues for better customization

📚 Documentation Improvements

• Comprehensive theme usage guide with scoped examples
• New troubleshooting section for common issues
• Detailed CSS variables reference with practical examples
• Added use cases and real-world application scenarios
• Interactive theme customizer on demo site

🔧 Package Updates

• Updated homepage to point to live demo site
• Better NPM package discoverability

📦 Installation

npm install react-3d-button@1.0.3
# or
yarn add react-3d-button@1.0.3
# or
pnpm add react-3d-button@1.0.3

🚀 Quick Start

import { Button3D } from 'react-3d-button';
import 'react-3d-button/styles';
import 'react-3d-button/themes/ocean.css'; // Optional theme

function App() {
  return (
    <Button3D type="primary" ripple onPress={() => console.log('Pressed!')}>
      Click Me!
    </Button3D>
  );
}

🎨 Features

• ✅ 9 Button Variants - Primary, Secondary, Tertiary, Success, Error, Warning, Info, Anchor, Danger
• ✅ 5 Pre-built Themes - Ocean, Sunset, Forest, Pirate, Neon
• ✅ Next.js 13+ Compatible - Works seamlessly with App Router
• ✅ Mobile Optimized - Enhanced touch support
• ✅ TypeScript Support - Full type definitions
• ✅ Zero Dependencies - ~24KB package size
• ✅ Customizable - Easy CSS variable overrides

📝 Full Changelog

Added

• Scoped theme class support for applying themes to specific sections
• Troubleshooting section in documentation
• Detailed CSS variables reference with examples
• Use cases section
• Interactive color customizer on demo site

Changed

• Theme CSS files now use scoped class names (.theme-{name})
• Updated package homepage to demo site
• Enhanced README with better examples and documentation

Fixed

• Theme override specificity issues
• CSS cascade conflicts when multiple themes are imported

🔗 Links

• Live Demo: https://react-3d-button-demo.vercel.app/
• NPM Package: https://www.npmjs.com/package/react-3d-button
• GitHub Repository: https://github.com/boranfurkan/react-3d-button
• Documentation: https://react-3d-button-demo.vercel.app/

🙏 Credits

Built on top of react-awesome-button by @rcaferati.

---

Full Changelog: v1.0.2...v1.0.3