Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/caish-cloud/react-cookies-consent
This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application 🍪
https://github.com/caish-cloud/react-cookies-consent
chakra-ui consent-management cookies framer-motion preferences react typescript zustand
Last synced: 3 months ago
JSON representation
This is a set of React components that provide an easy-to-implement solution for handling users' cookie preferences in your web application 🍪
- Host: GitHub
- URL: https://github.com/caish-cloud/react-cookies-consent
- Owner: caish-cloud
- License: mit
- Created: 2024-04-19T15:56:06.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-26T13:09:30.000Z (4 months ago)
- Last Synced: 2024-09-27T17:40:51.891Z (4 months ago)
- Topics: chakra-ui, consent-management, cookies, framer-motion, preferences, react, typescript, zustand
- Language: TypeScript
- Homepage:
- Size: 3.66 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# react-cookies-consent
> This package is deprecated. Please use at your own discretion!
[npm_url]: https://www.npmjs.org/package/@caish-cloud/react-cookies-consent
[][npm_url]
[][npm_url]
[][npm_url]
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:
- 🔔 ``: 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.
- 📃 ``: 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!
## Table of contents
- [react-cookies-consent](#react-cookies-consent)
- [Prerequisites](#prerequisites)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Alert](#alert)
- [Light Theme](#light-theme)
- [Dark Theme](#dark-theme)
- [Modal](#modal)
- [Light Theme](#light-theme-1)
- [Dark Theme](#dark-theme-1)
- [Props](#props)
- [``](#cookiesconsentalert-)
- [``](#cookiesconsentalertactions-)
- [``](#cookiesconsentalertbutton-)
- [``](#cookiesconsentalertcontent-)
- [``](#cookiesconsentalertdescription-)
- [``](#cookiesconsentalerttitle-)
- [``](#cookiesconsentmodal-)
- [``](#cookiesconsentmodalbody-)
- [``](#cookiesconsentmodalbutton-)
- [``](#cookiesconsentmodalcookieactions-)
- [``](#cookiesconsentmodalcookieaction-)
- [``](#cookiesconsentmodalctaactions-)
- [``](#cookiesconsentmodalfooter-)
- [``](#cookiesconsentmodalheader-)
- [``](#cookiesconsentmodaltext-)
- [Refs](#refs)
- [``](#cookiesconsentalert--1)
- [``](#cookiesconsentmodal--1)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Learn More](#learn-more)
- [Built With](#built-with)
- [Versioning](#versioning)
- [Authors](#authors)
- [License](#license)
## Installation
**BEFORE YOU INSTALL** - please read the [Prerequisites](#prerequisites) section.
To install and set up the library, run:
```sh
npm install @caish-cloud/react-cookies-consent
```
Or if you prefer using Yarn:
```sh
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.
```jsx
import { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';
function ExampleComponent() {
return (
{
// Handle what happens when user clicks on "Learn more" button
}}
text="Learn more"
variant="text"
/>
{
// Handle what happens when user accepts all cookies
}}
text="Accept cookies"
/>
{
// Handle what happens when user rejects all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
shouldShowModal={true}
text="Cookie settings"
/>
);
}
```
#### 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!
```jsx
import { CookiesConsentAlert } from '@caish-cloud/react-cookies-consent';
function ExampleComponent() {
return (
{
// Handle what happens when user clicks on "Learn more" button
}}
text="Learn more"
variant="text"
/>
{
// Handle what happens when user accepts all cookies
}}
text="Accept cookies"
/>
{
// Handle what happens when user rejects all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
shouldShowModal={true}
text="Cookie settings"
/>
);
}
```
### 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.
```jsx
import { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';
function ExampleComponent() {
return (
{
// Handle what happens when user accepts all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
text="Accept all"
/>
{
// Handle what happens when user rejects all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
text="Reject all"
/>
{
// Handle what happens when user toggles preferences cookies
}}
title="Preferences"
/>
{
// Handle what happens when user toggles analytics cookies
}}
title="Analytics"
/>
{
// Handle what happens when user toggles marketing cookies
}}
title="Marketing"
/>
{
// Handle what happens when user saves their cookie settings
}}
text="Save settings"
/>
);
}
```
#### 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!
```jsx
import { CookiesConsentModal } from '@caish-cloud/react-cookies-consent';
function ExampleComponent() {
return (
{
// Handle what happens when user accepts all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
text="Accept all"
/>
{
// Handle what happens when user rejects all cookies
}}
regularButtonColor={{ dark: '#718096', light: '#2D3748' }}
text="Reject all"
/>
{
// Handle what happens when user toggles preferences cookies
}}
title="Preferences"
/>
{
// Handle what happens when user toggles analytics cookies
}}
title="Analytics"
/>
{
// Handle what happens when user toggles marketing cookies
}}
title="Marketing"
/>
{
// Handle what happens when user saves their cookie settings
}}
text="Save settings"
/>
);
}
```
## Props
### ``
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
```jsx
```
---
#### `enterExitAnimation`
How the alert should enter and exit the screen.
| Required | Type | Default |
| -------- | ---------------------------------------------- | --------------- |
| False | `"from-bottom" \| "from-left" \| "from-right"` | `"from-bottom"` |
#### Example
```jsx
```
---
#### `enterExitAnimationEnabled`
Whether the enter/exit animations for the alert is enabled.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `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
```jsx
```
---
#### `placement`
The placement of the alert on the screen.
| Required | Type | Default |
| -------- | ---------------------------------------------------- | ----------------- |
| False | `"bottom-center" \| "bottom-left" \| "bottom-right"` | `"bottom-center"` |
#### Example
```jsx
```
---
#### `theme`
The theme for the alert (i.e. light/dark mode).
| Required | Type | Default |
| -------- | ------------------- | --------- |
| False | `"dark" \| "light"` | `"light"` |
#### Example
```jsx
```
---
### ``
This is the container for the Call-to-Action (CTA) buttons in the alert, which
can accept these components:
- ``
#### `containerStyle`
The styles for the container of the actions.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
This is a button used within the alert. This component can be used within
these components:
- ``
- ``
#### `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
```jsx
```
---
#### `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
```jsx
```
---
#### `hoverAnimationEnabled`
Whether the button should animate when hovered.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `onClick`
Handles what happens when the button is clicked.
| Required | Type | Default |
| -------- | ------------ | ------- |
| True | `() => void` | - |
#### Example
```jsx
console.log('clicked')} />
```
---
#### `regularButtonColor`
The color of the regular variant button.
| Required | Type | Default |
| -------- | ---------------------------------- | --------------------------------------- |
| False | `{ dark?: string, light: string }` | `{ dark: "#0082ba", light: "#0082ba" }` |
#### Example
```jsx
```
---
#### `shouldDismissAlert`
Whether the alert should be dismissed when the button is clicked.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `shouldShowModal`
Whether the modal should be shown when the button is clicked.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `false` |
#### Example
```jsx
```
---
#### `text`
The text to display in the button.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textButtonColor`
The color of the text variant button.
| Required | Type | Default |
| -------- | ---------------------------------- | --------------------------------------- |
| False | `{ dark?: string, light: string }` | `{ dark: "#00a2e8", light: "#00a2e8" }` |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the button text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | --------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "white" } }` |
#### Example
```jsx
```
---
#### `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
```jsx
```
---
### ``
This is the container for the content of the alert, which can accept these
custom components:
- ``
- ``
- ``
This is required.
#### `containerStyle`
The styles for the container of the content.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `text`
The text to display as the description.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the description text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `text`
The text to display as the title.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the title text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `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
```jsx
```
---
#### `onModalClose`
Handles what happens when the modal is closed.
| Required | Type | Default |
| -------- | ------------ | ------- |
| False | `() => void` | - |
#### Example
```jsx
console.log('closed')} />
```
---
#### `overlayBlurAmount`
The amount of blur for the overlay.
| Required | Type | Default |
| -------- | -------- | ------- |
| False | `number` | `4` |
#### Example
```jsx
```
---
#### `overlayBlurEnabled`
Whether the overlay should have a blurred effect.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `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
```jsx
```
---
#### `placement`
The placement of the modal on the screen.
| Required | Type | Default |
| -------- | -------------------------- | -------- |
| False | `"center" \| "middle-top"` | "center" |
#### Example
```jsx
```
---
#### `shouldShowCloseButton`
Whether the close button should be shown in the modal.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `shouldShowOverlay`
Whether the overlay should be shown when the modal is open.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `theme`
The theme for the modal (i.e. light/dark mode).
| Required | Type | Default |
| -------- | ------------------- | --------- |
| False | `"dark" \| "light"` | `"light"` |
#### Example
```jsx
```
---
### ``
The modal body container that will contain all of the user's content, which can
accept these custom components:
- ``
- ``
- ``
- ``
- ``
This is required.
#### `containerStyle`
The styles for the modal body container.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
This is a button used within the modal. This component can be used within
these components:
- ``
- ``
#### `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
```jsx
```
---
#### `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
```jsx
```
---
#### `hoverAnimationEnabled`
Whether the button should animate when hovered.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `onClick`
Handles what happens when the button is clicked.
| Required | Type | Default |
| -------- | ------------ | ------- |
| True | `() => void` | - |
#### Example
```jsx
console.log('clicked')} />
```
---
#### `regularButtonColor`
The color of the regular variant button.
| Required | Type | Default |
| -------- | ---------------------------------- | --------------------------------------- |
| False | `{ dark?: string, light: string }` | `{ dark: "#0082ba", light: "#0082ba" }` |
#### Example
```jsx
```
---
#### `shouldDismissAlert`
Whether the alert should be dismissed when the button is clicked.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `shouldHideModal`
Whether the modal should be hidden when the button is clicked.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `text`
The text to display in the button.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textButtonColor`
The color of the text variant button.
| Required | Type | Default |
| -------- | ---------------------------------- | --------------------------------------- |
| False | `{ dark?: string, light: string }` | `{ dark: "#00a2e8", light: "#00a2e8" }` |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the button text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | --------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "white" } }` |
#### Example
```jsx
```
---
#### `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
```jsx
```
---
### ``
The modal cookie actions container that gives the user control over their
preferences, which can accept these custom components:
- ``
#### `containerStyle`
The styles for the container of the modal cookie actions.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `description`
The description text to display.
| Required | Type | Default |
| -------- | -------- | ------- |
| False | `string` | - |
#### Example
```jsx
```
---
#### `descriptionStyle`
The styles for the description text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
#### `onSwitchToggle`
Handles what happens when the switch is toggled.
| Required | Type | Default |
| -------- | ------------------------------- | ------- |
| False | `(isSwitchOn: boolean) => void` | - |
#### Example
```jsx
console.log('is on:', isSwitchOn)}
/>
```
---
#### `switchDisabled`
Whether the switch is disabled.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `false` |
#### Example
```jsx
```
---
#### `switchToggledOffColor`
The color of the switch when it is off.
| Required | Type | Default |
| -------- | -------- | ----------- |
| False | `string` | `"#cbd5e0"` |
#### Example
```jsx
```
---
#### `switchToggledOn`
Whether the switch is toggled on by default.
| Required | Type | Default |
| -------- | --------- | ------- |
| False | `boolean` | `true` |
#### Example
```jsx
```
---
#### `switchToggledOnColor`
The color of the switch when it is on.
| Required | Type | Default |
| -------- | -------- | ----------- |
| False | `string` | `"#0082ba"` |
#### Example
```jsx
```
---
#### `title`
The title text to display.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `titleStyle`
The styles for the title text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
### ``
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:
- ``
#### `containerStyle`
The styles for the container of the modal CTA actions.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
The footer of the modal, which can accept these custom components:
- ``
#### `containerStyle`
The styles for the container of the modal footer.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | - |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `text`
The text to display as the header.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the header text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
### ``
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
```jsx
```
---
#### `text`
The text to display.
| Required | Type | Default |
| -------- | -------- | ------- |
| True | `string` | - |
#### Example
```jsx
```
---
#### `textStyle`
The styles for the text.
| Required | Type | Default |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| False | `{ dark?: React.CSSProperties, light: React.CSSProperties }` | `{ dark: { color: "white" }, light: { color: "#2D3748" } }` |
#### Example
```jsx
```
---
## Refs
### ``
#### `hide()`
Hides the alert.
#### Example
```tsx
import React from 'react';
import {
CookiesConsentAlert,
CookiesConsentAlertRef
} from '@caish-cloud/react-cookies-consent';
const alertRef = React.useRef(null);
React.useEffect(() => {
alertRef.current?.hide();
}, [alertRef]);
function ExampleComponent() {
return ;
}
```
---
#### `show()`
Shows the alert.
#### Example
```tsx
import React from 'react';
import {
CookiesConsentAlert,
CookiesConsentAlertRef
} from '@caish-cloud/react-cookies-consent';
const alertRef = React.useRef(null);
React.useEffect(() => {
alertRef.current?.show();
}, [alertRef]);
function ExampleComponent() {
return ;
}
```
---
### ``
#### `hide()`
Hides the modal.
#### Example
```tsx
import React from 'react';
import {
CookiesConsentModal,
CookiesConsentModalRef
} from '@caish-cloud/react-cookies-consent';
const modalRef = React.useRef(null);
React.useEffect(() => {
modalRef.current?.hide();
}, [modalRef]);
function ExampleComponent() {
return ;
}
```
---
#### `show()`
Shows the modal.
#### Example
```tsx
import React from 'react';
import {
CookiesConsentModal,
CookiesConsentModalRef
} from '@caish-cloud/react-cookies-consent';
const modalRef = React.useRef(null);
React.useEffect(() => {
modalRef.current?.show();
}, [modalRef]);
function ExampleComponent() {
return ;
}
```
## 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](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](https://open.spotify.com/episode/5QXKqiADxBcBg11kDZvQ5b?si=JYgLbnYGRX2Mhm5loVJscQ)
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](https://docs.bugsnag.com).
## Versioning
We use [Semantic Versioning 2.0.0](https://semver.org).
## Authors
Timothy Caish
- Github: [@tcaish](https://github.com/tcaish)
- Website: [https://timothy-caish.vercel.app](https://timothy-caish.vercel.app)
See the list of [contributors](https://github.com/caish-cloud/react-cookies-consent/contributors) who also participated in this project.
## License
[MIT License](LICENSE) © 2024 Caish Cloud, LLC