logo

CookieModal

Used to display a modal according to cookies configuration.

Props:

isOpen

Description: Define if CookieModal should be open. Type: Boolean. Required.

cookiesTitle

Description: Content to display cookie modal title. Type: String. Required.

cookiesText

Description: Content to display cookie modal text. Type: String. Required.

buttonTitle

Description: Content to display in the button. Type: String. Required.

privacePolicyTitle

Description: Content to display in the privacy policy link. Type: String. Required.

privacePolicyUrl

Description: Url to redirect to privacy policy page. Type: String. Required.

requestCloseModal

Description: Function invoked on modal requests close. Type: Function. Required.

showAnimation

Description: Define if the CookieModal should open with an animation. Type: Boolean. Default: true.

modalClassName

Description: Modal container className. Type: String.

overlayClassName

Description: Modal overlay className. Type: String.

titleClassName

Description: Modal title className. Type: String.

textClassName

Description: Modal text className. Type: String.

privacyLinkClassName

Description: Privacy policy link className. Type: String.

buttonClassName

Description: Button className. Type: String.

titleStyle

Description:Modal title style. Type: CSSProperties.

textStyle

Description:Modal text style. Type: CSSProperties.

privacyLinkStyle

Description: Privacy policy link style. Type: CSSProperties.

buttonStyle

Description: Button style. Type: CSSProperties.

Codeimport { parseCookies, setCookie } from 'nookies';
const [cookieModal, setCookieModal] = useState(true)
function handleCloseCookieModal(): void { setCookie(undefined, 'react-component:cookiestest', 'someValue', { maxAge: 60 * 60 * 24, // 30-days path: '/' }) setCookieModal(false) }
useEffect(() => { const cookies = parseCookies() const stringCookies = JSON.stringify(cookies) stringCookies.includes('react-component:cookiestes') && setCookieModal(false) }, [])
<CookieModalComponent isOpen={cookieModal} overlayClassName='react-cookie-modal-overlay' modalClassName='cookie-modal' buttonTitle='Acept cookies' requestCloseModal={handleCloseCookieModal} privacePolicyTitle='See our privacy policy' privacePolicyUrl='/' cookiesTitle='Cookies alert' cookiesText='We are using cookies' />

PabloSilvaDev - © Copyright 2022