@app-studio/components
CookieConsent
Displays a customizable banner to manage user consent for cookies, enhancing user experience.
View component sourceImport
ts
import { CookieConsent } from '@app-studio/components';New to the library? Complete installation and provider setup first.
Interactive examples
Try the component, then open Code to copy the complete example.
import React from 'react';
import { Button } from '@app-studio/components';
import { Text, View } from 'app-studio';
import { CookieConsent } from '@app-studio/components';
/**
* Default CookieConsent example
*/
export const DefaultCookieConsent = () => {
// State to control visibility for demo purposes
const [showConsent, setShowConsent] = React.useState(false);
// Reset cookie consent to show the banner
const handleShowConsent = () => {
// Clear localStorage to simulate a new visit (web only).
if (typeof localStorage !== 'undefined') {
localStorage.removeItem('app-studio-cookie-consent');
localStorage.removeItem('app-studio-cookie-consent-expires');
}
setShowConsent(true);
};
return (
<View width="100%" maxWidth={600}>
<Text marginBottom={16}>
Cliquez sur le bouton ci-dessous pour afficher la bannière de
consentement des cookies
</Text>
<Button onClick={handleShowConsent}>
Afficher le consentement des cookies
</Button>
{showConsent && (
<CookieConsent
onAccept={() => setShowConsent(false)}
onCustomize={() => alert('Préférences de personnalisation cliquées')}
/>
)}
</View>
);
};Props
Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.
Scroll horizontally to see every column.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Main title displayed by the component.Source |
description | View typestring | number | bigint | boolean | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> | Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal | Promise<string | number | bigint | boolean | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string | import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> | Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> | null | undefined> | null | — | Secondary text describing the control or its current state.Source |
acceptButtonText | string | — | See the type and source declaration for this property.Source |
customizeButtonText | string | — | See the type and source declaration for this property.Source |
position | CookieConsentPosition"bottom""top" | — | Position of the element or notification.Source |
variant | CookieConsentVariant"default""info""primary" | — | Visual treatment of the component.Source |
onAccept | (() => void) | — | See the type and source declaration for this property.Source |
onCustomize | (() => void) | — | See the type and source declaration for this property.Source |
views | CookieConsentStyles | — | Style overrides for the named internal parts.Source |
showCustomizeButton | boolean | — | See the type and source declaration for this property.Source |
cookieExpiration | number | — | See the type and source declaration for this property.Source |
Common inherited styling props (7)
Scroll horizontally to see every column.
| Prop | Type | Default | Description |
|---|---|---|---|
onClick | any | — | Called when the user activates the component. |
media | Record<string, CssProps> | — | See the type and source declaration for this property. |
as | keyof JSX.IntrinsicElements"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view" | — | See the type and source declaration for this property. |
themeMode | "light" | "dark""light""dark" | — | See the type and source declaration for this property. |
_hover | string | CssProps | — | See the type and source declaration for this property. |
_active | string | CssProps | — | See the type and source declaration for this property. |
_focus | string | CssProps | — | See the type and source declaration for this property. |
For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.
Usage guidance
- Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check React Native setup for platform requirements and differences.