Bespoke Integration

The CookiePreferences uses a React Context  to provide internal state that is shared across any sub-components that need it. This context contains displayMode and its setter setDisplayMode, which can used to change which view is displayed.

useCookiePreferencesContext() hook

When you want to provide custom components, you’ll want them to be able to do the same actions that the default components can do, like changing the state of the component to show the banner or selection views, or showing and hiding the components all together. This can be achieved using the CookiePreferences.useCookiePreferencesContext() hook.

CookiePreferences.useCookiePreferencesContext() gives you access to the internal state used in the Header context.

You can get use this inside child components of CookiePreferences, or if you need to be able to create a button to e.g open and close the component from elsewhere in your application, you can use the CookiePreferences.CookiePreferencesProvider to wrap your application, and then you can use CookiePreferences.useCookiePreferencesContext() from anywhere in the subtree.

Bespoke child component

If you want to make a totally custom banner component, but still want the default behaviour of it being hidden and shown as the internal state of the component is updated, you can be wrap your component in CookiePreferences.CookiePreferencesChild, and use CookiePreferences.useCookiePreferencesContext() to trigger state changes.

const BespokeBannerComponent = () => {
    const { setDisplayMode } = CookiePreferences.useCookiePreferencesContext();
 
    return (
        <CookiePreferencesChild displayName="banner">
            <Container
                component="section"
                theme="base500"
                marginX="auto"
                paddingX="md"
                maxWidth="lg"
            >
                <Stack direction="vertical">
                    This is a completely custom banner
                    <Button onClick={() => setDisplayMode('selection')}>
                        Change Display
                    </Button>
                </Stack>
            </Container>
        </CookiePreferencesChild>
    );
};
 
<CookiePreferences
    initialDisplayMode="banner"
>
    <BespokeBannerComponent />
    <CookieSelection
        onPreferencesChosen={(chosenCookies) => { ... }}
        cookies={cookies}
    />
</CookiePreferences>