bite-consent

Bite Consent

Bite Consent is a lightweight React library for managing cookie consent views with customizable descriptions and actions. It provides an easy way to implement cookie consent functionality in your React applications while ensuring compliance with privacy regulations.

Features

• Simple integration with React applications
• Customizable cookie consent banner with description and actions
• Built-in actions for "Got it" and opening the privacy policy
• Lightweight and easy to use

Installation

You can install Bite Consent via npm or yarn:

npm install bite-consent

or

yarn add bite-consent

Usage

To use Bite Consent in your React application, you can now also use the useBiteConsent hook:

import React from 'react'
import { useBiteConsent } from 'bite-consent'

function App() {
  const { consentCookie, show, revoke } = useBiteConsent({
    privacyPolicyUrl: 'https://example.com/privacy',
    theme: {
      mode: 'auto'
    }
  })

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to My Website</h1>
      </header>
      <main>{/* Your component content */}</main>
      {consentCookie ? null : <button onClick={show}>Show Consent Banner</button>}
    </div>
  )
}

export default App

BiteConsentOptions

Name	Type	Default	Description
privacyPolicyUrl	string	undefined	The URL to your privacy policy. Required.
text	string	Hey there! We use cookies to keep things running smoothly on our website and to get to know you better. It helps us make your time here as awesome as possible! ❤️	Custom text to display in the consent banner.
visibility	auto | visible | hidden	auto	Specifies the visibility of the consent banner. auto displays the view based on the availability of the consent cookie, whereas visible displays and hidden hides it.
position	Position | CustomPosition	bottom-left	Sets the position of the consent view on the page. See below for details.
cookieConfig	CookieConfig	-	Configuration options for consent cookies. See below for details.
theme	Theme	-	Theme object containing color configurations for the consent view. See below for details.
onAccept	function	() => void	A function to be called when the user accepts the cookie policy.

Position

Type	Description
top-left	Positions the element at the top left corner.
top-right	Positions the element at the top right corner.
bottom-left	Positions the element at the bottom left corner.
bottom-right	Positions the element at the bottom right corner.

CustomPosition

Property	Type	Description
top	number | string	The distance from the top of the container. Accepts number or CSS string.
left	number | string	The distance from the left of the container. Accepts number or CSS string.
right	number | string	The distance from the right of the container. Accepts number or CSS string.
bottom	number | string	The distance from the bottom of the container. Accepts number or CSS string.

CookieConfig

Property	Type	Description
name	string	The name or identifier of the consent cookie.
maxAge	number	The maximum age of the consent cookie in seconds.
expires	Date	The expiration date of the consent cookie.
path	string	The path within the website's domain for which the cookie is valid.
domain	string	The domain for which the cookie is valid.
secure	boolean	Indicates if the cookie should only be sent over secure connections.
sameSite	Strict | Lax | None	The SameSite attribute of the consent cookie.

Theme

The theme object allows customization of the colors used in the consent banner.

Property	Type	Description
mode	ThemeMode	The theme mode.
light	ColorSet	Color configurations for light mode.
dark	ColorSet	Color configurations for dark mode.

ColorSet Properties:

• background: Background color of the consent banner.
• text: Text color of the consent banner.
• shadow: Box shadow of the consent banner.
• primaryActionBackground: Background color of primary action buttons.
• primaryActionHoverBackground: Background color of primary action buttons on hover.
• primaryActionText: Text color of primary action buttons.
• secondaryActionBackground: Background color of secondary action buttons.
• secondaryActionText: Text color of secondary action buttons.
• secondaryActionHoverBackground: Background color of secondary action buttons on hover.

License

Bite Consent is released under the MIT License.