react-cookies-consent

This package is deprecated. Please use at your own discretion!

Introducing a comprehensive and customizable solution for managing cookie consent in your React applications! Our package includes a set of powerful components designed to make the implementation of cookie consent straightforward and compliant with user preferences.

Key Features:

🔔 <CookiesConsentAlert />: Jumpstart user interaction with a simple alert at the bottom of the screen that asks users to confirm their cookie preferences, such as accepting all cookies or choosing which to accept and decline. This component is designed to be non-intrusive yet clear to ensure immediate understanding from the user.
📃 <CookiesConsentModal />: Provide users with detailed control over their cookie preferences. This modal allows for granular settings adjustments, giving users the power to manage their privacy preferences effectively.
✨ Customization: Tailor the appearance and behavior of your cookie consent components to match your application’s theme and branding. Supports both light and dark modes, ensuring a seamless integration regardless of your UI design.
📱 Responsive: Looks great on desktop, tablet, and mobile.

Whether you are looking to ensure compliance, improve user experience, or both, our react-cookies-consent components package offers the tools you need to integrate cookie consent functionality into your applications effortlessly!

Prerequisites

Storing User Preferences

This library is only for saving you the time for developing the components necessary to give the user control over their cookie preferences. You will have to manage the actual preferences of the user by storing in your database, local storage, etc. So please be sure you already have this in place or will plan to!

Installation

BEFORE YOU INSTALL - please read the Prerequisites section.

To install and set up the library, run:

npm install @caish-cloud/react-cookies-consent

Or if you prefer using Yarn:

yarn add @caish-cloud/react-cookies-consent

Usage

The usage examples below will get you started with using the alert component in conjunction with the modal component. You do not have to use both! You can use one or the other depending on your development needs.

Alert

This component lives at the bottom of the screen, and will animate in (if chosen to) to alert the user of their ability to choose their cookie preferences.

The best place to put this is at the root of your project, such as your providers file, App.js, or just somewhere that the user will hit no matter what page they go to. This is because we want this alert to display on any page the user navigates to if not the home page for compliance reasons. If this is not what you need, feel free to put it anywhere!

Light Theme

This is the default theme for the component and does not require any additional configuration.

import { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';

function ExampleComponent() {
  return (
    <CookiesConsentAlert>
      <CookiesConsentAlert.Content>
        <CookiesConsentAlert.Title text="About cookies on this site" />

        <CookiesConsentAlert.Description text="This website uses cookies to ensure you get the best experience on our website." />

        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user clicks on "Learn more" button
          }}
          text="Learn more"
          variant="text"
        />
      </CookiesConsentAlert.Content>

      <CookiesConsentAlert.Actions>
        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user accepts all cookies
          }}
          text="Accept cookies"
        />

        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user rejects all cookies
          }}
          regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
          shouldShowModal={true}
          text="Cookie settings"
        />
      </CookiesConsentAlert.Actions>
    </CookiesConsentAlert>
  );
}

Dark Theme

As shown in the code below, you'll need to add the theme="dark" parameter to the root component, and that's it!

import { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';

function ExampleComponent() {
  return (
    <CookiesConsentAlert theme="dark">
      <CookiesConsentAlert.Content>
        <CookiesConsentAlert.Title text="About cookies on this site" />

        <CookiesConsentAlert.Description text="This website uses cookies to ensure you get the best experience on our website." />

        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user clicks on "Learn more" button
          }}
          text="Learn more"
          variant="text"
        />
      </CookiesConsentAlert.Content>

      <CookiesConsentAlert.Actions>
        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user accepts all cookies
          }}
          text="Accept cookies"
        />

        <CookiesConsentAlert.Button
          onClick={() => {
            // Handle what happens when user rejects all cookies
          }}
          regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
          shouldShowModal={true}
          text="Cookie settings"
        />
      </CookiesConsentAlert.Actions>
    </CookiesConsentAlert>
  );
}

Modal

This component will animate in to the center or top-middle of the screen to give the user granular control over their cookie preferences.

The best place to put this is right next to the alert component from this library. If you're not using the alert component, then you can put this where you'll need it!

Light Theme

This is the default theme for the component and does not require any additional configuration.

import { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';

function ExampleComponent() {
  return (
    <CookiesConsentModal>
      <CookiesConsentModal.Header text="Cookie Settings" />

      <CookiesConsentModal.Body>
        <CookiesConsentModal.Text text="This website uses cookies to ensure you get the best experience on our website." />

        <CookiesConsentModal.CtaActions>
          <CookiesConsentModal.Button
            onClick={() => {
              // Handle what happens when user accepts all cookies
            }}
            regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
            text="Accept all"
          />

          <CookiesConsentModal.Button
            onClick={() => {
              // Handle what happens when user rejects all cookies
            }}
            regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
            text="Reject all"
          />
        </CookiesConsentModal.CtaActions>

        <CookiesConsentModal.CookieActions>
          <CookiesConsentModal.CookieAction
            description="Some cookies are required to provide core functionality. The website won't function properly without these cookies and they are enabled by default."
            switchDisabled={true}
            switchToggledOn={true}
            title="Necessary cookies"
          />

          <CookiesConsentModal.CookieAction
            description="Preference cookies enables the web site to remember information to customize how the web site looks or behaves for each user. This may include storing selected currency, region, language or color theme."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles preferences cookies
            }}
            title="Preferences"
          />

          <CookiesConsentModal.CookieAction
            description="Analytical cookies help us improve our website by collecting and reporting information on its usage."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles analytics cookies
            }}
            title="Analytics"
          />

          <CookiesConsentModal.CookieAction
            description="Marketing cookies are used to track visitors across websites to allow publishers to display relevant and engaging advertisements. By enabling marketing cookies, you grant permission for personalized advertising across various platforms."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles marketing cookies
            }}
            title="Marketing"
          />
        </CookiesConsentModal.CookieActions>
      </CookiesConsentModal.Body>

      <CookiesConsentModal.Footer>
        <CookiesConsentModal.Button
          onClick={() => {
            // Handle what happens when user saves their cookie settings
          }}
          text="Save settings"
        />
      </CookiesConsentModal.Footer>
    </CookiesConsentModal>
  );
}

Dark Theme

As shown in the code below, you'll need to add the theme="dark" parameter to the root component, and that's it!

import { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';

function ExampleComponent() {
  return (
    <CookiesConsentModal theme="dark">
      <CookiesConsentModal.Header text="Cookie Settings" />

      <CookiesConsentModal.Body>
        <CookiesConsentModal.Text text="This website uses cookies to ensure you get the best experience on our website." />

        <CookiesConsentModal.CtaActions>
          <CookiesConsentModal.Button
            onClick={() => {
              // Handle what happens when user accepts all cookies
            }}
            regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
            text="Accept all"
          />

          <CookiesConsentModal.Button
            onClick={() => {
              // Handle what happens when user rejects all cookies
            }}
            regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
            text="Reject all"
          />
        </CookiesConsentModal.CtaActions>

        <CookiesConsentModal.CookieActions>
          <CookiesConsentModal.CookieAction
            description="Some cookies are required to provide core functionality. The website won't function properly without these cookies and they are enabled by default."
            switchDisabled={true}
            switchToggledOn={true}
            title="Necessary cookies"
          />

          <CookiesConsentModal.CookieAction
            description="Preference cookies enables the web site to remember information to customize how the web site looks or behaves for each user. This may include storing selected currency, region, language or color theme."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles preferences cookies
            }}
            title="Preferences"
          />

          <CookiesConsentModal.CookieAction
            description="Analytical cookies help us improve our website by collecting and reporting information on its usage."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles analytics cookies
            }}
            title="Analytics"
          />

          <CookiesConsentModal.CookieAction
            description="Marketing cookies are used to track visitors across websites to allow publishers to display relevant and engaging advertisements. By enabling marketing cookies, you grant permission for personalized advertising across various platforms."
            onSwitchToggle={(isSwitchOn) => {
              // Handle what happens when user toggles marketing cookies
            }}
            title="Marketing"
          />
        </CookiesConsentModal.CookieActions>
      </CookiesConsentModal.Body>

      <CookiesConsentModal.Footer>
        <CookiesConsentModal.Button
          onClick={() => {
            // Handle what happens when user saves their cookie settings
          }}
          text="Save settings"
        />
      </CookiesConsentModal.Footer>
    </CookiesConsentModal>
  );
}

Props

`<CookiesConsentAlert />`

This is the root/parent component for the alert. This is required.

`containerStyle`

The styles for the container of the alert.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { backgroundColor: "#2D3748" }, light: { backgroundColor: "white" } }`

Example

<CookiesConsentAlert
  containerStyle={{
    dark: {
      backgroundColor: '#2D3748'
    },
    light: {
      backgroundColor: 'white'
    }
  }}
/>

`enterExitAnimation`

How the alert should enter and exit the screen.

Required	Type	Default
False	`"from-bottom" \| "from-left" \| "from-right"`	`"from-bottom"`

Example

<CookiesConsentAlert enterExitAnimation="from-left" />

`enterExitAnimationEnabled`

Whether the enter/exit animations for the alert is enabled.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentAlert enterExitAnimationEnabled={false} />

`localStorageKeyName`

The key name for the local storage item that stores the alert dismissed state.

Required	Type	Default
False	`string`	`"react-cookies-consent/alert-dismissed"`

Example

<CookiesConsentAlert localStorageKeyName="my-test-key-name" />

`placement`

The placement of the alert on the screen.

Required	Type	Default
False	`"bottom-center" \| "bottom-left" \| "bottom-right"`	`"bottom-center"`

Example

<CookiesConsentAlert placement="bottom-left" />

`theme`

The theme for the alert (i.e. light/dark mode).

Required	Type	Default
False	`"dark" \| "light"`	`"light"`

Example

<CookiesConsentAlert theme="dark" />

`<CookiesConsentAlert.Actions />`

This is the container for the Call-to-Action (CTA) buttons in the alert, which can accept these components:

<CookiesConsentAlert.Button />

`containerStyle`

The styles for the container of the actions.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions
    containerStyle={{
      dark: {
        backgroundColor: '#2D3748'
      },
      light: {
        backgroundColor: 'white'
      }
    }}
  ></CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`<CookiesConsentAlert.Button />`

This is a button used within the alert. This component can be used within these components:

<CookiesConsentAlert.Content />
<CookiesConsentAlert.Actions />

`clickAnimationEnabled`

Whether the button should have click animations.

Note: this is disabled by default when using the "text" variant.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button clickAnimationEnabled={false} />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`containerStyle`

The styles for the container of the button.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { backgroundColor: "#0082ba" }, light: { backgroundColor: "#0082ba" } }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`hoverAnimationEnabled`

Whether the button should animate when hovered.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button hoverAnimationEnabled={false} />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`onClick`

Handles what happens when the button is clicked.

Required	Type	Default
True	`() => void`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button onClick={() => console.log('clicked')} />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`regularButtonColor`

The color of the regular variant button.

Required	Type	Default
False	`{ dark?: string, light: string }`	`{ dark: "#0082ba", light: "#0082ba" }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button
      regularButtonColor={{ dark: '#0082ba', light: '#0082ba' }}
      variant="regular"
    />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`shouldDismissAlert`

Whether the alert should be dismissed when the button is clicked.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button shouldDismissAlert={false} />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`shouldShowModal`

Whether the modal should be shown when the button is clicked.

Required	Type	Default
False	`boolean`	`false`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button shouldShowModal={true} />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`text`

The text to display in the button.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button text="Accept All" />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`textButtonColor`

The color of the text variant button.

Required	Type	Default
False	`{ dark?: string, light: string }`	`{ dark: "#00a2e8", light: "#00a2e8" }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button
      textButtonColor={{ dark: '#00a2e8', light: '#00a2e8' }}
      variant="text"
    />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`textStyle`

The styles for the button text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "white" } }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button
      textStyle={{
        dark: {
          color: 'white'
        },
        light: {
          color: '#2D3748'
        }
      }}
    />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`variant`

The type of button to render.

"regular" - A regular looking button.
"text" - A button that looks like a text link.

Required	Type	Default
False	`"regular" \| "text"`	`"regular"`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Actions>
    <CookiesConsentAlert.Button variant="text" />
  </CookiesConsentAlert.Actions>
</CookiesConsentAlert>

`<CookiesConsentAlert.Content />`

This is the container for the content of the alert, which can accept these custom components:

<CookiesConsentAlert.Button />
<CookiesConsentAlert.Description />
<CookiesConsentAlert.Title />

This is required.

`containerStyle`

The styles for the container of the content.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content
    containerStyle={{
      dark: {
        backgroundColor: '#2D3748'
      },
      light: {
        backgroundColor: 'white'
      }
    }}
  ></CookiesConsentAlert.Content>
</CookiesConsentAlert>

`<CookiesConsentAlert.Description />`

This is the description of the alert.

`containerStyle`

The styles for the container of the description.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Description
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`text`

The text to display as the description.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Description text="This is a description of our cookie consent alert." />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`textStyle`

The styles for the description text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Description
      textStyle={{
        dark: {
          color: 'white'
        },
        light: {
          color: '#2D3748'
        }
      }}
    />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`<CookiesConsentAlert.Title />`

This is the title of the alert.

`containerStyle`

The styles for the container of the title.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Title
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`text`

The text to display as the title.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Title text="Cookie Settings" />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`textStyle`

The styles for the title text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentAlert>
  <CookiesConsentAlert.Content>
    <CookiesConsentAlert.Title
      textStyle={{
        dark: {
          color: 'white'
        },
        light: {
          color: '#2D3748'
        }
      }}
    />
  </CookiesConsentAlert.Content>
</CookiesConsentAlert>

`<CookiesConsentModal />`

This is the root/parent component for the modal. This is required.

`closeButtonStyle`

The styles for the close button.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentModal
  closeButtonStyle={{
    dark: {
      color: 'white'
    },
    light: {
      color: '#2D3748'
    }
  }}
/>

`containerStyle`

The styles for the content container of the modal.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { backgroundColor: "#2D3748" }, light: { backgroundColor: "white" } }`

Example

<CookiesConsentModal
  containerStyle={{
    dark: {
      backgroundColor: '#2D3748'
    },
    light: {
      backgroundColor: 'white'
    }
  }}
/>

`onModalClose`

Handles what happens when the modal is closed.

Required	Type	Default
False	`() => void`	-

Example

<CookiesConsentModal onModalClose={() => console.log('closed')} />

`overlayBlurAmount`

The amount of blur for the overlay.

Required	Type	Default
False	`number`	`4`

Example

<CookiesConsentModal overlayBlurAmount={6} />

`overlayBlurEnabled`

Whether the overlay should have a blurred effect.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal overlayBlurEnabled={false} />

`overlayColor`

The color of the overlay.

Required	Type	Default
False	`string`	`rgba(0, 0, 0, 0.5)`

Note: this is only used when overlayBlurEnabled is false.

Example

<CookiesConsentModal
  overlayBlurEnabled={false}
  overlayColor="rgba(255,255,255,0.5)"
/>

`placement`

The placement of the modal on the screen.

Required	Type	Default
False	`"center" \| "middle-top"`	"center"

Example

<CookiesConsentModal placement="center" />

`shouldShowCloseButton`

Whether the close button should be shown in the modal.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal shouldShowCloseButton={false} />

`shouldShowOverlay`

Whether the overlay should be shown when the modal is open.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal shouldShowOverlay={false} />

`theme`

The theme for the modal (i.e. light/dark mode).

Required	Type	Default
False	`"dark" \| "light"`	`"light"`

Example

<CookiesConsentModal theme="dark" />

`<CookiesConsentModal.Body />`

The modal body container that will contain all of the user's content, which can accept these custom components:

<CookiesConsentModal.Button />
<CookiesConsentModal.CookieAction />
<CookiesConsentModal.CookieActions />
<CookiesConsentModal.CtaActions />
<CookiesConsentModal.Text />

This is required.

`containerStyle`

The styles for the modal body container.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body
    containerStyle={{
      dark: {
        backgroundColor: '#2D3748'
      },
      light: {
        backgroundColor: 'white'
      }
    }}
  ></CookiesConsentModal.Body>
</CookiesConsentModal>

`<CookiesConsentModal.Button />`

This is a button used within the modal. This component can be used within these components:

<CookiesConsentModal.CtaActions />
<CookiesConsentModal.Footer />

`clickAnimationEnabled`

Whether the button should have click animations.

Note: this is disabled by default when using the "text" variant.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button clickAnimationEnabled={false} />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`containerStyle`

The styles for the container of the button.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { backgroundColor: "#0082ba" }, light: { backgroundColor: "#0082ba" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button
        containerStyle={{
          dark: {
            backgroundColor: '#2D3748'
          },
          light: {
            backgroundColor: 'white'
          }
        }}
      />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`hoverAnimationEnabled`

Whether the button should animate when hovered.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button hoverAnimationEnabled={false} />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`onClick`

Handles what happens when the button is clicked.

Required	Type	Default
True	`() => void`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button onClick={() => console.log('clicked')} />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`regularButtonColor`

The color of the regular variant button.

Required	Type	Default
False	`{ dark?: string, light: string }`	`{ dark: "#0082ba", light: "#0082ba" }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button
        regularButtonColor={{ dark: '#0082ba', light: '#0082ba' }}
        variant="regular"
      />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`shouldDismissAlert`

Whether the alert should be dismissed when the button is clicked.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button shouldDismissAlert={false} />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`shouldHideModal`

Whether the modal should be hidden when the button is clicked.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button shouldHideModal={false} />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`text`

The text to display in the button.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button text="Accept All" />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`textButtonColor`

The color of the text variant button.

Required	Type	Default
False	`{ dark?: string, light: string }`	`{ dark: "#00a2e8", light: "#00a2e8" }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button
        textButtonColor={{ dark: '#00a2e8', light: '#00a2e8' }}
        variant="text"
      />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`textStyle`

The styles for the button text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "white" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button
        textStyle={{
          dark: {
            color: 'white'
          },
          light: {
            color: '#2D3748'
          }
        }}
      />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`variant`

The type of button to render.

"regular" - A regular looking button.
"text" - A button that looks like a text link.

Required	Type	Default
False	`"regular" \| "text"`	`"regular"`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions>
      <CookiesConsentModal.Button variant="text" />
    </CookiesConsentModal.CtaActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`<CookiesConsentModal.CookieActions />`

The modal cookie actions container that gives the user control over their preferences, which can accept these custom components:

<CookiesConsentModal.CookieAction />

`containerStyle`

The styles for the container of the modal cookie actions.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    ></CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`<CookiesConsentModal.CookieAction />`

The action to take in the modal that will perform a given action for a specific type of cookie category (e.g. turn off cookies for analytics).

`containerStyle`

The styles for the container of the action.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction
        containerStyle={{
          dark: {
            backgroundColor: '#2D3748'
          },
          light: {
            backgroundColor: 'white'
          }
        }}
      />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`description`

The description text to display.

Required	Type	Default
False	`string`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction description="This is a description of the cookie preference." />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`descriptionStyle`

The styles for the description text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction
        descriptionStyle={{
          dark: {
            color: 'white'
          },
          light: {
            color: '#2D3748'
          }
        }}
      />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`onSwitchToggle`

Handles what happens when the switch is toggled.

Required	Type	Default
False	`(isSwitchOn: boolean) => void`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction
        onSwitchToggle={(isSwitchOn) => console.log('is on:', isSwitchOn)}
      />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`switchDisabled`

Whether the switch is disabled.

Required	Type	Default
False	`boolean`	`false`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction switchDisabled={true} />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`switchToggledOffColor`

The color of the switch when it is off.

Required	Type	Default
False	`string`	`"#cbd5e0"`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction switchToggledOffColor="#cbd5e0" />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`switchToggledOn`

Whether the switch is toggled on by default.

Required	Type	Default
False	`boolean`	`true`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction switchToggledOn={false} />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`switchToggledOnColor`

The color of the switch when it is on.

Required	Type	Default
False	`string`	`"#0082ba"`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction switchToggledOnColor="#0082ba" />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`title`

The title text to display.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction title="Analytical Cookies" />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`titleStyle`

The styles for the title text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CookieActions>
      <CookiesConsentModal.CookieAction
        titleStyle={{
          dark: {
            color: 'white'
          },
          light: {
            color: '#2D3748'
          }
        }}
      />
    </CookiesConsentModal.CookieActions>
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`<CookiesConsentModal.CtaActions />`

The modal actions container that contains the Call-to-Action (CTA) buttons, such as for accepting or rejecting all cookies, which can accept these custom components:

<CookiesConsentModal.Button />

`containerStyle`

The styles for the container of the modal CTA actions.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.CtaActions
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    />
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`<CookiesConsentModal.Footer />`

The footer of the modal, which can accept these custom components:

<CookiesConsentModal.Button />

`containerStyle`

The styles for the container of the modal footer.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Footer
    containerStyle={{
      dark: {
        backgroundColor: '#2D3748'
      },
      light: {
        backgroundColor: 'white'
      }
    }}
  ></CookiesConsentModal.Footer>
</CookiesConsentModal>

`<CookiesConsentModal.Header />`

This is the header text of the modal.

`containerStyle`

The styles for the container of the header.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Header
    containerStyle={{
      dark: {
        backgroundColor: '#2D3748'
      },
      light: {
        backgroundColor: 'white'
      }
    }}
  />
</CookiesConsentModal>

`text`

The text to display as the header.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Header text="Cookie Settings" />
</CookiesConsentModal>

`textStyle`

The styles for the header text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Header
    textStyle={{
      dark: {
        color: 'white'
      },
      light: {
        color: '#2D3748'
      }
    }}
  />
</CookiesConsentModal>

`<CookiesConsentModal.Text />`

The text used within the modal component.

`containerStyle`

The styles for the container of the text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.Text
      containerStyle={{
        dark: {
          backgroundColor: '#2D3748'
        },
        light: {
          backgroundColor: 'white'
        }
      }}
    />
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`text`

The text to display.

Required	Type	Default
True	`string`	-

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.Text text="This is some placeholder content." />
  </CookiesConsentModal.Body>
</CookiesConsentModal>

`textStyle`

The styles for the text.

Required	Type	Default
False	`{ dark?: React.CSSProperties, light: React.CSSProperties }`	`{ dark: { color: "white" }, light: { color: "#2D3748" } }`

Example

<CookiesConsentModal>
  <CookiesConsentModal.Body>
    <CookiesConsentModal.Text
      textStyle={{
        dark: {
          color: 'white'
        },
        light: {
          color: '#2D3748'
        }
      }}
    />
  </CookiesConsentModal.Body>
</CookiesConsentModal>

Refs

`<CookiesConsentAlert />`

`hide()`

Hides the alert.

Example

import React from 'react';
import {
  CookiesConsentAlert,
  CookiesConsentAlertRef
} from '@caish-cloud/react-cookies-consent';

const alertRef = React.useRef<CookiesConsentAlertRef>(null);

React.useEffect(() => {
  alertRef.current?.hide();
}, [alertRef]);

function ExampleComponent() {
  return <CookiesConsentAlert ref={alertRef} />;
}

`show()`

Shows the alert.

Example

import React from 'react';
import {
  CookiesConsentAlert,
  CookiesConsentAlertRef
} from '@caish-cloud/react-cookies-consent';

const alertRef = React.useRef<CookiesConsentAlertRef>(null);

React.useEffect(() => {
  alertRef.current?.show();
}, [alertRef]);

function ExampleComponent() {
  return <CookiesConsentAlert ref={alertRef} />;
}

`<CookiesConsentModal />`

`hide()`

Hides the modal.

Example

import React from 'react';
import {
  CookiesConsentModal,
  CookiesConsentModalRef
} from '@caish-cloud/react-cookies-consent';

const modalRef = React.useRef<CookiesConsentModalRef>(null);

React.useEffect(() => {
  modalRef.current?.hide();
}, [modalRef]);

function ExampleComponent() {
  return <CookiesConsentModal ref={modalRef} />;
}

`show()`

Shows the modal.

Example

import React from 'react';
import {
  CookiesConsentModal,
  CookiesConsentModalRef
} from '@caish-cloud/react-cookies-consent';

const modalRef = React.useRef<CookiesConsentModalRef>(null);

React.useEffect(() => {
  modalRef.current?.show();
}, [modalRef]);

function ExampleComponent() {
  return <CookiesConsentModal ref={modalRef} />;
}

Troubleshooting

The alert disappeared and doesn't show anymore.

If you can't get the alert to display again, you will need to go into your browser's local storage settings, find the react-cookies-consent/alert-dismissed key, and change the value to false. This is how we keep track of when the user saved their preferences and do not need to be shown the alert anymore.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests to us.

Learn More

If you want to learn more about cookie consent alerts and whether or not you need one, check out this podcast episode by Syntax and fast forward to 32:30.

Built With

The design concepts came from the implementation of BugSnag's cookies consent alert and modal. See it in action here.

Versioning

We use Semantic Versioning 2.0.0.

Authors

Timothy Caish

Github: @tcaish
Website: https://timothy-caish.vercel.app

See the list of contributors who also participated in this project.

Name		Name	Last commit message	Last commit date
Latest commit History 202 Commits
.github		.github
assets		assets
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
package.json		package.json
prettier.config.js		prettier.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

License

caish-cloud/react-cookies-consent

Folders and files

Latest commit

History

Repository files navigation

react-cookies-consent

Prerequisites

Storing User Preferences

Table of contents

Installation

Usage

Alert

Light Theme

Dark Theme

Modal

Light Theme

Dark Theme

Props

<CookiesConsentAlert />

containerStyle

Example

enterExitAnimation

Example

enterExitAnimationEnabled

Example

localStorageKeyName

Example

placement

Example

theme

Example

<CookiesConsentAlert.Actions />

containerStyle

Example

<CookiesConsentAlert.Button />

clickAnimationEnabled

Example

containerStyle

Example

hoverAnimationEnabled

Example

onClick

Example

regularButtonColor

Example

shouldDismissAlert

Example

shouldShowModal

Example

text

Example

textButtonColor

Example

textStyle

Example

variant

Example

<CookiesConsentAlert.Content />

containerStyle

Example

<CookiesConsentAlert.Description />

containerStyle

Example

text

Example

textStyle

Example

<CookiesConsentAlert.Title />

containerStyle

Example

text

Example

textStyle

Example

<CookiesConsentModal />

closeButtonStyle

Example

containerStyle

Example

`<CookiesConsentAlert />`

`containerStyle`

`enterExitAnimation`

`enterExitAnimationEnabled`

`localStorageKeyName`

`placement`

`theme`

`<CookiesConsentAlert.Actions />`

`containerStyle`

`<CookiesConsentAlert.Button />`

`clickAnimationEnabled`

`containerStyle`

`hoverAnimationEnabled`

`onClick`

`regularButtonColor`

`shouldDismissAlert`

`shouldShowModal`

`text`

`textButtonColor`

`textStyle`

`variant`

`<CookiesConsentAlert.Content />`

`containerStyle`

`<CookiesConsentAlert.Description />`

`containerStyle`

`text`

`textStyle`

`<CookiesConsentAlert.Title />`

`containerStyle`

`text`

`textStyle`

`<CookiesConsentModal />`

`closeButtonStyle`

`containerStyle`

`onModalClose`

`overlayBlurAmount`

`overlayBlurEnabled`

`overlayColor`

`placement`

`shouldShowCloseButton`

`shouldShowOverlay`

`theme`

`<CookiesConsentModal.Body />`

`containerStyle`

`<CookiesConsentModal.Button />`

`clickAnimationEnabled`

`containerStyle`

`hoverAnimationEnabled`

`onClick`

`regularButtonColor`

`shouldDismissAlert`

`shouldHideModal`

`text`

`textButtonColor`

`textStyle`

`variant`

`<CookiesConsentModal.CookieActions />`

`containerStyle`

`<CookiesConsentModal.CookieAction />`

`containerStyle`

`description`

`descriptionStyle`

`onSwitchToggle`

`switchDisabled`

`switchToggledOffColor`

`switchToggledOn`

`switchToggledOnColor`

`title`

`titleStyle`