React Tailwind Cookies

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

Default look and feel

Configuration

Installation

To install the library, use npm or yarn:

npm install react-tailwind-cookies

or

yarn add react-tailwind-cookies

Usage

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

Basic Example

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

const App = () => {
  return (
    <div>
      <CookieBanner
        cookieName="user-preferences"
        title="We use cookies"
        description="This website uses cookies to ensure you get the best experience on our website."
        acceptButtonLabel="Accept"
        rejectButtonLabel="Reject"
        position="bottom"
      />
      <h1>Welcome to our website!</h1>
    </div>
  );
};

export default App;

Props

| 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.