React SDK

React SDK annab komponentidele otsese ligipääsu külastaja nõusolekule. Komponendid renderdatakse valiku muutumisel uuesti, nii et sa ei pea kunagi küpsiseid lugema ega lehte uuesti laadima. See töötab React 18 ja uuematega, sealhulgas Next.js-i, Remixi ja Vite’i rakendustes.

Paigaldamine

npm install @cookiesh/react

SDK kasutab taustal Cookiesh skriptimärgendit. Laadi see võimalikult vara, nagu on näidatud kiirjuhendis, ja mähi seejärel oma rakendus komponenti CookieshProvider.

CookieshProvider

import { CookieshProvider } from '@cookiesh/react';

export function App({ children }: { children: React.ReactNode }) {
  return (
    <CookieshProvider siteId="ck_live_8f2a91" userId={session?.user.id}>
      {children}
    </CookieshProvider>
  );
}

Atribuut	Tüüp	Kirjeldus
siteId	string	Sinu saidi ID. Valikuline, kui skriptimärgend juba määrab data-site-id.
userId	string | undefined	Seob nõusoleku sisselogitud kasutajaga, et see liiguks temaga seadmete vahel kaasa. Väärtuse undefined andmine pärast väljalogimist kutsub välja reset().
language	string	Määrab bänneri keele.
onChange	(state: ConsentState) => void	Kutsutakse välja pärast iga uut valikut.

useConsent

useConsent() tagastab praeguse oleku ja toimingud selle muutmiseks:

import { useConsent } from '@cookiesh/react';

function PrivacySettingsLink() {
  const { openPreferences } = useConsent();
  return <button onClick={openPreferences}>Privacy settings</button>;
}

Tagastatud objekt sisaldab:

Väli	Tüüp	Kirjeldus
ready	boolean	false, kuni nõusoleku olek on teada
necessary, preferences, analytics, marketing	boolean	Iga kategooria praegune väärtus
method	string	Kuidas praegune olek tekkis (vaata JavaScripti API-t)
acceptAll, rejectAll	() => Promise<ConsentState>	Salvesta valik kõigi kategooriate jaoks
setConsent	(choices) => Promise<ConsentState>	Salvesta valik mõne kategooria jaoks
showBanner, openPreferences	() => void	Ava Cookiesh kasutajaliides

ConsentGate

ConsentGate renderdab oma alamelemendid ainult siis, kui kõik loetletud kategooriad on lubatud, ja muul juhul asendussisu:

import { ConsentGate } from '@cookiesh/react';

<ConsentGate category="marketing" fallback={<VideoPlaceholder />}>
  <YouTubeEmbed id="dQw4w9WgXcQ" />
</ConsentGate>

Mitme kategooria nõudmiseks anna massiiv, näiteks category={['analytics', 'marketing']}.

Serveripoolne renderdamine

Külastaja valik asub tema brauseris, seega pole see teada, kui leht serveris renderdatakse. Serveripoolse renderdamise ja esimese kliendipoolse renderduse ajal on ready väärtusega false ja iga kategooria peale necessary on false. Seetõttu renderdatakse nõusolekust sõltuv sisu pärast hüdreerimist ja enne nõusolekut ei käivitu midagi.

Paigutuse nihke vältimiseks anna komponendile ConsentGate asendussisu, mis on sama suur kui sisu, mida see asendab. Next.js-i App Routeris peavad komponendid, mis kutsuvad välja useConsent(), olema kliendikomponendid ('use client').

Testimine

Ühiktestides mähi komponendid komponenti CookieshTestProvider, et juhtida olekut ilma skripti laadimata:

import { render, screen } from '@testing-library/react';
import { CookieshTestProvider } from '@cookiesh/react/testing';

render(
  <CookieshTestProvider consent={{ analytics: true, marketing: false }}>
    <Dashboard />
  </CookieshTestProvider>,
);