Components-extra
logo

v3.2.1

CookiesConsent

This component can be one good UI solution for you when you want to handle yourself the interface between your cookies and your users. CookiesConsent provides a light but advanced interface to help you manage your cookies selections.

On desktop screens, the description of the category will be displayed next to the title. On small screens, it will be displayed inside the content of the accordion.

You can append any content to each <CookiesConsent.Category>, meaning you can bring your own table component, or a list, or even a simple paragraph. Here, the Table component is not included in <CookiesConsent>, it is a separate component for the sake of the demo.

Note: By default, the Categories are uncontrolled. But you can also chose to control them with a [checked, onChange] set of props.

Default

Manage Cookies Preferences

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

Table in categories

Manage Cookies Preferences
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.

No controls

Manage Cookies Preferences

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

No title

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies. This is a paragraph explaining how great are those cookies.

Extended

This component was extended using styled() from styled-components.

Manage Cookies Preferences
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.
NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.

Props

NameTypeDefaultDescription
childrennodeThe content of the component. You can either use an assemble of the ones available in its scope, like CookiesConsent.Category, or bring your own elemnts.
titlestringThe main title of the component.

The ref will be forwarded to the html root element, as well as any other props.


CookiesConsent.Category

Default Category

This is a paragprah about the category. This is a paragprah about the category. This is a paragprah about the category.

This is a paragprah about the category. This is a paragprah about the category. This is a paragprah about the category.

Table in content

NameValueExpiresDescription
namejohn Smithin 5 daysYour name.
age42on the 3th of November 2020Your age.
sexM12/12/20Your sex.
planpremiumin 21 daysThe plan you first chose on sign up.

No description

This is a paragprah about the category. This is a paragprah about the category. This is a paragprah about the category.

Extended

This component was extended using styled() from styled-components.

This is a paragprah about the category. This is a paragprah about the category. This is a paragprah about the category.

Props

This component extends Material's UI <Accordion> so you can use all its props as well. Check out its Api.

NameTypeDefaultDescription
checkedboolIf true, the switch is checked and the category is on. Leave to undefined if you don't need to control the component.
childrennodeThe content of the category.
descriptionstringA brief description of the cookies category.
onChangefuncFunction called on switch change. Signature: (event) => void. You can access the value using `event.target.value`.
title*stringThe title of the cookies category. Required.

The ref will be forwarded to the html root element, as well as any other props.


CookiesConsent.Controls

Default Controls

No switch

Custom controls

Extended

This component was extended using styled() from styled-components.

Props

NameTypeDefaultDescription
checkedboolIf true, the switch is checked and the category is on. Leave to undefined if you don't need to control the component.
childrennodeThe content of the controls section. You can either use CookiesConsent.Button or bring your own controls.
onChangefuncFunction called on switch change. Signature: (event) => void. You can access the value using `event.target.checked`. If you don't provide an onChange function, the switch will not be displayed.
switchLabelstringThe switch's label.

The ref will be forwarded to the html root element, as well as any other props.


CookiesConsent.Button

Default Button

Props

This component extends Material's UI <Button> so you can use all its props as well. Check out its Api. It requires no other prop.

The ref will be forwarded to the html root element, as well as any other props.