@sabbirshaawon/easy-cookie-consent

Easy Cookie Consent

A lightweight, customizable cookie consent banner package for modern web applications. Easy to implement, highly customizable, and feature-rich.

Features

• 🚀 Easy to implement
• 🎨 Fully customizable design
• 📱 Responsive and mobile-friendly
• 🔧 Configurable options
• 🌐 GDPR compliant
• ⚡ Lightweight
• 🎉 No dependencies except js-cookie

Installation

npm install @sabbirshaawon/easy-cookie-consent

Quick Start

import EasyCookieConsent from '@sabbirshaawon/easy-cookie-consent';

// Initialize with default options
const cookieConsent = new EasyCookieConsent();

Usage Examples

Basic Usage

import EasyCookieConsent from '@sabbirshaawon/easy-cookie-consent';

const cookieConsent = new EasyCookieConsent({
  message: 'We use cookies to enhance your experience.',
  acceptText: 'Accept All',
  declineText: 'Decline'
});

Advanced Usage

const cookieConsent = new EasyCookieConsent({
  cookieName: 'my_cookie_consent',
  expiryDays: 30,
  message: 'We use cookies to improve your experience.',
  acceptText: 'Got it!',
  declineText: 'No thanks',
  customClass: 'my-custom-banner',
  position: 'top',
  onAccept: () => {
    console.log('Cookies accepted');
    // Your custom code here
  },
  onDecline: () => {
    console.log('Cookies declined');
    // Your custom code here
  }
});

Customization

Custom Styling

Add your own CSS classes to customize the appearance:

/* Custom banner style */
.my-custom-banner {
  background: #2c3e50;
  color: white;
}

/* Custom button style */
.my-custom-banner .cookie-consent-button {
  background: #3498db;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

.my-custom-banner .cookie-consent-accept {
  background: #2ecc71;
}

.my-custom-banner .cookie-consent-decline {
  background: #e74c3c;
}

Configuration Options

Option	Type	Default	Description
cookieName	string	'cookie_consent'	Name of the cookie to store consent
expiryDays	number	365	Days until the cookie expires
message	string	'This website uses cookies...'	Consent message to display
acceptText	string	'Accept'	Text for accept button
declineText	string	'Decline'	Text for decline button
customClass	string	''	Custom CSS class for styling
position	string	'bottom'	Banner position ('top' or 'bottom')
onAccept	function	() => {}	Callback when cookies are accepted
onDecline	function	() => {}	Callback when cookies are declined

Methods

getCookieConsent()

Returns the current cookie consent status.

const status = cookieConsent.getCookieConsent();

setCookieConsent(value)

Manually set the cookie consent status.

cookieConsent.setCookieConsent('accepted');

Events

The package provides two callback events:

const cookieConsent = new EasyCookieConsent({
  onAccept: () => {
    // Triggered when user accepts cookies
    console.log('Cookies accepted');
  },
  onDecline: () => {
    // Triggered when user declines cookies
    console.log('Cookies declined');
  }
});

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)
• Mobile browsers (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. Check out our GitHub repository.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Sabbir Ahmed

Support

If you have any questions or need help with implementation, please create an issue in the GitHub repository.