Open Schlomoh opened 3 months ago
@zriyansh, please provide some more information about your setup and implementation. Best to provide a reproducible example.
Steps to reporduce I am using this blog template for my website - https://github.com/timlrx/tailwind-nextjs-starter-blog
Just use the compone that I requested you to add in the app/layout.tsx
file.
...
<ThemeProviders>
<Analytics analyticsConfig={siteMetadata.analytics as AnalyticsConfig} />
<SectionContainer>
<div className="flex h-screen flex-col justify-between font-sans">
<SearchProvider>
<Header />
<main className="mb-auto">{children}</main>
</SearchProvider>
<Footer />
</div>
</SectionContainer>
</ThemeProviders>
<CookieBanner />
</body>
{/* <script>
<InjectCSS/>
</script> */}
</html>
)
}
system:
sometimes the component load like this before it fully renders.
Full render example:
@Schlomoh
this is my component
'use client';
import { CookieBanner } from '@schlomoh/react-cookieconsent';
import React from 'react';
import Link from './Link'
const MyCookieBanner = () => {
const Content = () => (
<>
<h3 className='text-sm'>Life is better with cookies 🍪</h3>
<p className='text-xs'>This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt out if you wish. <Link href="/cookie" className='text-blue underline'>Cookie Policy</Link></p>
</>
)
const MContent = () => (
<>
<h3 className='text-sm'>Manage your cookie settings.</h3>
<p className='text-xs'>We use cookies and other tracking technologies to improve your experience on our website. We may store and/or access information on a device</p>
</>
)
const containerStyle = {backgroundColor: 'white'};
const buttonStyle = {borderRadius: 10}
const primaryButtonStyle={...buttonStyle, backgroundColor:'green', fontSize: '12px', padding: '0px' }
const secondaryButtonStyle={...buttonStyle, backgroundColor:'red', fontSize: '12px', padding: '5px' }
return (
<CookieBanner
acceptButtonText='Accept'
declineButtonText='Reject'
headingColor='black'
paragraphColor='grey'
containerStyle={containerStyle}
primaryButtonStyle={primaryButtonStyle}
secondaryButtonStyle={secondaryButtonStyle}
infoContent={<Content />}
enableManagement
managementContent={<MContent />}
managementButtonText='Preferences'
cookieCategories={['Analytics', 'Advertisement']}
// accentColor = 'coral'
/>
);
};
export default MyCookieBanner;
https://github.com/Schlomoh/cookieConsent/assets/52788043/0642a63b-b072-45fa-b57d-d81f798e5d51
video of the glitch @Schlomoh
Also, when using the component, whenever I hit refresh, the cookie banner comes and goes swifty (as if it glitches). Maybe you can improve it so that after accepting or rejecting, it does not load and show glitches.
_Originally posted by @zriyansh in https://github.com/Schlomoh/cookieConsent/pull/9#discussion_r1665933055_