1 year ago

#384258

test-img

Jake Hemmington

Accessing onAccept() function in react cookie consent from custom button

I have a gatsby-react application which uses gatsby-plugin-gdpr-cookies and react-cookie-consent packages to enable and disable cookies and implement cookie consent bar. Here is the part of the component:

import CookieConsent from "react-cookie-consent";
import ReactGA from "react-ga";
import styled from "styled-components";
import { Button, Grid, Link, NoSsr, Typography } from "@material-ui/core";
import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';

<CookieConsent
        location="none"
        cookieName="gatsby-gdpr-google-analytics"
        disableStyles = {true}
        onAccept={() => {
          console.log("cookies accepted");
          ReactGA.initialize("UA-XXXXXXXX-XX");
        }}
      >
        <StyledBanner container justify="center" alignItems="center">
          <Grid item container direction="column" lg={9} xs={12}>
            <StyledText>
              This website uses cookies.
            </StyledText>
          </Grid>
          <Grid
            container
            item
            justify="center"
            alignItems="center"
            lg={3}
            xs={12}
            wrap={"nowrap"}
          >
            <Button
              variant="outlined"
              *onClick={this.onAccept}*
            >
              I Disagree
            </Button>

            <Button
              variant="outlined"
              *onClick={this.onAccept}*
            >
              I Agree
            </Button>
          </Grid>
        </StyledBanner>
      </CookieConsent>

I would really like to trigger the onAccept function in CookieConsent so that my cookies can be enabled. The reason I would like use a custom button is so that the color scheme and theme of my app is constant without having to redesign within the default CookieConsent buttons. If this is not possible I would also like to explore the customButtonProps prop within CookieConsent option but I having a very difficult time in making that work. I wanted to know if one of these two options are possible and take a look at small implementation.

reactjs

cookies

material-ui

react-props

react-cookie-consent

0 Answers

Your Answer

Accepted video resources