Cookie Banner Component for React, Svelte, and Astro

Easily integrate a Cookie Policy banner into your site with the help of this component. This package includes fully coded components for React, Svelte, and Astro. Inform your users about the use of cookies with a custom, modern cookie banner.

This package comes with the following features:

• Multiple framework support: The package includes code for the <CookieBanner /> component written for React, Svelte, and Astro meaning you’ll get three different implementation with this product, so you can use it with different tech stacks.
• Configurable: Customize the appearance of your banner through the props. Set your heading, text, and button labels. Four different custom cookie icons are also provided with this package. Use the component in the following way:

// Import the relevant component
import { CookieBanner } from '@components/CookieBanner.tsx'
import CookieBanner from '@components/CookieBanner.svelte'
import CookieBanner from '@components/CookieBanner.astro'

// Call the component with the following props
<CookieBanner
    heading="Cookie Policy"
    text="We use cookies..."
    acceptButtonLabel="Accept"
    declineButtonLabel="Decline"
    showIcon={true}
    icon={1}
    position="left"
/>

// Possible prop types
type CookieBannerProps = {
    heading?: string
    text: string
    acceptButtonLabel?: string
    declineButtonLabel?: string
    showIcon?: boolean
    icon?: 1 | 2 | 3 | 4
    position?: 'left' | 'right' | 'bottom'
}

• Easy to style: Styles can be configured via Sass variables through the stylesheet provided with the component.
• Responsive: The layout is fully responsive that adapts perfectly for all device resolutions like mobiles, tablets and desktops.
• Cross-browser support: The component was tested on major browsers (Chrome, Firefox, and Edge) to ensure cross-browser compatibility.
• Unit-tested: The codebase includes unit tests written in Vitest for both React and Svelte components that you can port over to your project. (full Vitest setup is also included)