React Tailwind Cookies

!npm
!npm bundle size
!npm

A React component library for handling cookie consent banners, styled with Tailwind CSS.

Default look and feel

!Default look and feel

Configuration

!Configuration

Installation

To install the library, use npm or yarn:

``bash
npm install react-tailwind-cookies
`

or

`bash
yarn add react-tailwind-cookies
`

Usage

To use the CookieBanner component, import it into your project and include it in your component tree.

$3

`jsx
import React from "react";
import "react-tailwind-cookies/dist/tailwind.css"; // Import the CSS
import { CookieBanner } from "react-tailwind-cookies";

const App = () => {
return (


export default App;
`

$3

| Prop | Type | Default | Description |
| ----------------------------------------------------------------------------------------------- | -------- | -------- | ------------------------------------------------------------------------------ |
| cookieName | string | | The name of the cookie to store the user's preference. |
| classNames | object | | An object to customize the CSS class names for various parts of the component. |
|    container | string | | CSS class for the container of the cookie banner. |
|    banner | string | | CSS class for the banner. |
|    message | string | | CSS class for the message. |
|    title | string | | CSS class for the title. |
|    description | string | | CSS class for the description. |
|    buttons | object | | CSS classes for the buttons. |
|       container | string | | CSS class for the container of the buttons. |
|       accept | string | | CSS class for the accept button. |
|       reject | string | | CSS class for the reject button. |
|       configure | string | | CSS class for the configure button. |
|    cookieConfigurator | object | | An object to customize the CSS class names for the cookie configurator. |
|       container | string | | CSS class for the configurator container. |
|       overlay | string | | CSS class for the overlay. |
|       modal | object | | An object to customize the CSS class names for the modal. |
|          container | string | | CSS class for the modal container. |
|          title | string | | CSS class for the modal title. |
|          cookieTitle | string | | CSS class for the cookie title. |
|          description | string | | CSS class for the modal description. |
|          cookies | object | | An object to customize the CSS class names for the cookies section. |
|            container | string | | CSS class for the cookies container. |
|            switchClassNames | object | | An object to customize the CSS class names for the switch elements. |
|               container | string | | CSS class for the switch container. |
|               label | string | | CSS class for the switch label. |
|               input | string | | CSS class for the switch input. |
| title | string | | The title of the cookie banner. |
| description | string | | The description text of the cookie banner. |
| acceptButtonLabel | string | "Accept" | The label for the accept button. |
| rejectButtonLabel | string | "Reject" | The label for the reject button. |
| acceptAllButtonLabel | string | | The label for the accept all button. |
| position | string | "bottom" | The position of the cookie banner, either "top" or "bottom". |
| hasRejectButton | boolean | true | Whether to show the reject button. |
| selectedCookies | string[] | | An array of selected cookies. |
| configureTitle | string | | The title for the configure section. |
| configureButtonLabel | string | | The label for the configure button. |
| viewMoreLinkLabel | string | | The label for the view more link. |
| viewMoreLinkPath | string | | The path for the view more link. |
| hasViewMoreLink | boolean | | Whether to show the view more link. |
| configureDescription | string | | The description for the configure section. |
| configureCookiesTitle | string | | The title for the configure cookies section. |
| hasConfigureButton | boolean | false | Whether to show the configure button. |
| configurableCookies | string[] | | An array of configurable cookies. |
| hasAcceptAllButton | boolean | false | Whether to show the accept all button. |
| onAccept | function | | Callback function to be called when cookies are accepted. |
| onReject | function | | Callback function to be called when cookies are rejected. |
| onAcceptAll` | function | | Callback function to be called when all cookies are accepted. |

Contributing

If you have suggestions for how this library could be improved, or want to report a bug, open an issue! We'd love all and any contributions.

License

This project is licensed under the MIT License.