1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[489],{9960:function(e,o,n){n.r(o),n.d(o,{_frontmatter:function(){return r},default:function(){return p}});var a=n(20765),t=(n(2784),n(94099)),s=n(61700),i=(n(61281),["components"]),r={name:"CookiesConsent",menu:"Components",route:"/components/cookies-consent",description:"The API documentation of the CookiesConsent React component. Play around with demos and check out its props."},l={_frontmatter:r};function p(e){var o=e.components,n=(0,a.Z)(e,i);return(0,t.kt)("wrapper",Object.assign({},l,n,{components:o,mdxType:"MDXLayout"}),(0,t.kt)("h1",null,"CookiesConsent"),(0,t.kt)("p",null,"This component can be one good UI solution for you when you want to handle yourself the interface between your cookies and your users.\n",(0,t.kt)("strong",{parentName:"p"},"CookiesConsent")," provides a light but advanced interface to help you manage your cookies selections."),(0,t.kt)("p",null,"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."),(0,t.kt)("p",null,"You can append any content to each ",(0,t.kt)("inlineCode",{parentName:"p"},"<CookiesConsent.Category>"),", meaning you can bring\nyour own table component, or a list, or even a simple paragraph. Here, the ",(0,t.kt)("inlineCode",{parentName:"p"},"Table")," component\nis not included in ",(0,t.kt)("inlineCode",{parentName:"p"},"<CookiesConsent>"),", it is a separate component for the sake of the demo."),(0,t.kt)("blockquote",null,(0,t.kt)("p",{parentName:"blockquote"},(0,t.kt)("strong",{parentName:"p"},"Note:")," By default, the Categories are uncontrolled. But you can also chose to control them with a ",(0,t.kt)("em",{parentName:"p"},"[checked, onChange]")," set of props.")),(0,t.kt)("ul",null,(0,t.kt)("li",{parentName:"ul"},(0,t.kt)("a",{parentName:"li",href:"/components/cookies-consent#"},"CookiesConsent")),(0,t.kt)("li",{parentName:"ul"},(0,t.kt)("a",{parentName:"li",href:"/components/cookies-consent#cookiesconsent-category"},"CookiesConsent.Category")),(0,t.kt)("li",{parentName:"ul"},(0,t.kt)("a",{parentName:"li",href:"/components/cookies-consent#cookiesconsent-controls"},"CookiesConsent.Controls")),(0,t.kt)("li",{parentName:"ul"},(0,t.kt)("a",{parentName:"li",href:"/components/cookies-consent#cookiesconsent-button"},"CookiesConsent.Button"))),(0,t.kt)("h2",null,"Default"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n() => {\n const [cookies, setCookies] = React.useState({\n analytics: false,\n functional: true,\n tracking: false,\n })\n const toggleAll = ({ target: { checked }}) =>\n setCookies({\n analytics: checked,\n functional: checked,\n tracking: checked,\n })\n return (\n <CookiesConsent title="Manage Cookies Preferences">\n <CookiesConsent.Category\n checked={cookies.analytics}\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n onChange={e => setCookies(cookies => ({ ...cookies, analytics: e.target.checked }))}\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n checked={cookies.functional}\n description="Theses cookies enable us to offer you a personalized experience on our site"\n title="Functional cookies"\n onChange={e => setCookies(cookies => ({ ...cookies, functional: e.target.checked }))}\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n checked={cookies.tracking}
1\n description="Theses cookies helps us to track you. You cannot escape!"\n title="Tracking cookies"\n onChange={e => setCookies(cookies => ({ ...cookies, tracking: e.target.checked }))}\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Controls switchLabel="All cookies" onChange={toggleAll}>\n <CookiesConsent.Button>Cancel</CookiesConsent.Button>\n <CookiesConsent.Button>Confirm</CookiesConsent.Button>\n </CookiesConsent.Controls>\n </CookiesConsent>\n )\n}\n')),(0,t.kt)("h2",null,"Table in categories"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent title="Manage Cookies Preferences">\n <CookiesConsent.Category\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Table />\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies enable us to offer you a personalized experience on our site"\n title="Functional cookies"\n >\n <Table />\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies helps us to track you. You cannot escape!"\n title="Tracking cookies"\n >\n <Table />\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h2",null,"No controls"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent title="Manage Cookies Preferences">\n <CookiesConsent.Category\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies enable us to offer you a personalized experience on our site"\n title="Functional cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies helps us to track you. You cannot escape!"\n title="Tracking cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h2",null,"No title"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent>\n <CookiesConsent.Category\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies enable us to offer you a personalized experience on our site"\n title="Functional cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n <CookiesConsent.Category\n description="Theses cookies helps us to track y
1ou. You cannot escape!"\n title="Tracking cookies"\n >\n <Paragraph>\n This is a paragraph explaining how great are those cookies. This is a paragraph\n explaining how great are those cookies. This is a paragraph explaining how great are\n those cookies. This is a paragraph explaining how great are those cookies.\n </Paragraph>\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h2",null,"Extended"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live-extended\n<ExtendedCookiesConsent title="Manage Cookies Preferences">\n <ExtendedCategory\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Table />\n </ExtendedCategory>\n <ExtendedCategory\n description="Theses cookies enable us to offer you a personalized experience on our site"\n title="Functional cookies"\n >\n <Table />\n </ExtendedCategory>\n <ExtendedCategory\n description="Theses cookies helps us to track you. You cannot escape!"\n title="Tracking cookies"\n >\n <Table />\n </ExtendedCategory>\n</ExtendedCookiesConsent>\n')),(0,t.kt)("h2",null,"Props"),(0,t.kt)(s.Z,{of:"CookiesConsent",mdxType:"Props"}),(0,t.kt)("br",null),(0,t.kt)("hr",null),(0,t.kt)("h2",null,"CookiesConsent.Category"),(0,t.kt)("h3",null,"Default Category"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent>\n <CookiesConsent.Category\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Paragraph>\n This is a paragprah about the category. This is a paragprah about the category. This is a\n paragprah about the category.\n </Paragraph>\n <Paragraph>\n This is a paragprah about the category. This is a paragprah about the category. This is a\n paragprah about the category.\n </Paragraph>\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h3",null,"Table in content"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent>\n <CookiesConsent.Category\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n >\n <Table />\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h3",null,"No description"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n<CookiesConsent>\n <CookiesConsent.Category title="Analytics cookies">\n <Paragraph>\n This is a paragprah about the category. This is a paragprah about the category. This is a\n paragprah about the category.\n </Paragraph>\n </CookiesConsent.Category>\n</CookiesConsent>\n')),(0,t.kt)("h3",null,"Extended"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live-extended\n<ExtendedCategory\n description="Theses cookies help us to analyze what you are doing on our site"\n title="Analytics cookies"\n>\n <Paragraph>\n This is a paragprah about the category. This is a paragprah about the category. This is a\n paragprah about the category.\n </Paragraph>\n</ExtendedCategory>\n')),(0,t.kt)("h3",null,"Props"),(0,t.kt)("p",null,"This component extends Material's UI ",(0,t.kt)("inlineCode",{parentName:"p"},"<Accordion>")," so you can use all its props as well. Check out its ",(0,t.kt)("a",{parentName:"p",href:"https://material-ui.com/api/accordion/"},"Api"),"."),(0,t.kt)(s.Z,{of:"CookiesConsent.Category",mdxType:"Props"}),(0,t.kt)("br",null),(0,t.kt)("hr",null),(0,t.kt)("h2",null,"CookiesConsent.Controls"),(0,t.kt)("h3",null,"Default Controls"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n() => {\n const [isOn, setIsOn] = React.useState(false)\n return (\n <CookiesConsent>\n <CookiesConsent.Controls checked={isOn} onChange={(e) => setIsOn(e.target.checked)} switchLabel="All cookies">\n <CookiesConsent.Button>Cancel</CookiesConsent.Button>\n <CookiesConsent.Button>Confirm</CookiesConsent.Button>\n </CookiesConsent.Controls>\n </CookiesConsent>\n )\n}\n')),(0,t.kt)("h3",null,"No switch"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},"// live\n<CookiesConsent>\n <CookiesConsent.Controls>\n <CookiesConsent.Button>Cancel</CookiesConsent.Button>\n <CookiesConsent.Button>Confirm</CookiesConsent.Button>\n </CookiesConsent.Controls>
1\n</CookiesConsent>\n")),(0,t.kt)("h3",null,"Custom controls"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},'// live\n() => {\n const [isOn, setIsOn] = React.useState(false)\n return (\n <CookiesConsent>\n <CookiesConsent.Controls checked={isOn} onChange={(e) => setIsOn(e.target.checked)} switchLabel="All cookies">\n <button>Cancel</button>\n <button>Confirm</button>\n </CookiesConsent.Controls>\n </CookiesConsent>\n )\n}\n')),(0,t.kt)("h3",null,"Extended"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},"// live-extended\n <ExtendedControlsStory />\n")),(0,t.kt)("h3",null,"Props"),(0,t.kt)(s.Z,{of:"CookiesConsent.Controls",mdxType:"Props"}),(0,t.kt)("br",null),(0,t.kt)("hr",null),(0,t.kt)("h2",null,"CookiesConsent.Button"),(0,t.kt)("h3",null,"Default Button"),(0,t.kt)("pre",null,(0,t.kt)("code",{parentName:"pre",className:"language-jsx"},"// live\n<CookiesConsent.Button>Confirm</CookiesConsent.Button>\n")),(0,t.kt)("h3",null,"Props"),(0,t.kt)("p",null,"This component extends Material's UI ",(0,t.kt)("inlineCode",{parentName:"p"},"<Button>")," so you can use all its props as well. Check out its ",(0,t.kt)("a",{parentName:"p",href:"https://material-ui.com/api/button/"},"Api"),".\nIt requires no other prop."),(0,t.kt)(s.Z,{of:"CookiesConsent.Button",mdxType:"Props"}))}p.isMDXComponent=!0}}]); 2//# sourceMappingURL=component---src-pages-components-cookies-consent-mdx-10b8e2c2063b56b6ee43.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.