React Tailwind Cookies

anbrela

Cookie banner with configuration options for React projects.

Download

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

Configuration

Installation

To install the library, use npm or yarn:

npm install react-tailwind-cookies

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.

Top categories