React-SDK

React-SDK antaa komponenteille suoran pääsyn kävijän suostumukseen. Komponentit renderöityvät uudelleen, kun valinta muuttuu, joten evästeitä ei tarvitse lukea eikä sivua ladata uudelleen. SDK toimii React 18:n ja uudempien kanssa, myös Next.js-, Remix- ja Vite-sovelluksissa.

Asennus

npm install @cookiesh/react

SDK käyttää taustalla Cookieshin script-tagia. Lataa se mahdollisimman aikaisin pikaoppaan mukaisesti ja kääri sitten sovelluksesi CookieshProvider-komponentin sisään.

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>
  );
}

Prop	Tyyppi	Kuvaus
siteId	string	Sivustosi tunniste. Valinnainen, jos script-tagi asettaa jo data-site-id-attribuutin.
userId	string | undefined	Liittää suostumuksen kirjautuneeseen käyttäjään, jolloin se seuraa käyttäjää laitteelta toiselle. Arvon undefined välittäminen uloskirjautumisen jälkeen kutsuu reset()-metodia.
language	string	Pakottaa bannerin kielen.
onChange	(state: ConsentState) => void	Kutsutaan jokaisen uuden valinnan jälkeen.

useConsent

useConsent() palauttaa nykyisen tilan ja toiminnot sen muuttamiseen:

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

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

Palautettu olio sisältää:

Kenttä	Tyyppi	Kuvaus
ready	boolean	false, kunnes suostumustila on tiedossa
necessary, preferences, analytics, marketing	boolean	Kunkin kategorian nykyinen arvo
method	string	Miten nykyinen tila on syntynyt (katso JavaScript-API)
acceptAll, rejectAll	() => Promise<ConsentState>	Tallentavat valinnan kaikille kategorioille
setConsent	(choices) => Promise<ConsentState>	Tallentaa valinnan osalle kategorioista
showBanner, openPreferences	() => void	Avaavat Cookieshin käyttöliittymän

ConsentGate

ConsentGate renderöi lapsielementtinsä vain, kun jokainen luetelluista kategorioista on sallittu, ja muussa tapauksessa varasisällön:

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

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

Jos haluat vaatia useita kategorioita, välitä taulukko, kuten category={['analytics', 'marketing']}.

Palvelinrenderöinti

Kävijän valinta on tallessa hänen selaimessaan, joten sitä ei tiedetä, kun sivu renderöidään palvelimella. Palvelinrenderöinnin ja ensimmäisen asiakaspuolen renderöinnin aikana ready on false, ja kaikki kategoriat paitsi necessary ovat false. Suostumuksesta riippuva sisältö renderöidään siis hydraation jälkeen, eikä mitään suoriteta ennen suostumusta.

Vältä asettelun siirtymät antamalla ConsentGate-komponentille varasisältö, joka on samankokoinen kuin korvattava sisältö. Next.js:n App Routerissa useConsent()-hookia kutsuvien komponenttien on oltava asiakaskomponentteja ('use client').

Testaus

Kääri komponentit yksikkötesteissä CookieshTestProvider-komponentin sisään, niin voit hallita tilaa lataamatta skriptiä:

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

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