Cookie Banner

Нижний баннер о cookie (152-ФЗ) — текст согласия со ссылкой на политику и кнопкой «Принять».

Мы используем файлы cookie, чтобы сайт работал корректно и был удобнее. Продолжая пользоваться Oracul, вы соглашаетесь с Политикой обработки cookie.

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CookieBanner } from "@/components/ui/cookie-banner";

export default function Particle() {
  const [open, setOpen] = useState(true);

  return (
    // The banner is `position: fixed` (bottom of the viewport in the app). A
    // transformed ancestor becomes the containing block for fixed descendants,
    // so this wrapper keeps the demo banner inside the preview tile.
    <div className="relative flex min-h-65 w-full items-center justify-center [transform:translateZ(0)]">
      {open ? null : (
        <Button onClick={() => setOpen(true)} variant="outline">
          Показать cookie-баннер
        </Button>
      )}
      <CookieBanner onAccept={() => setOpen(false)} open={open} />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/cookie-banner

Использование

import { CookieBanner } from "@/components/ui/cookie-banner";
 
<CookieBanner open={open} onAccept={accept} />

Текст согласия можно заменить через children, а цель ссылки на политику — через policyHref:

<CookieBanner open={open} onAccept={accept} policyHref="/cookies">
  Используем cookie для корректной работы сайта.
</CookieBanner>

API

Презентационный (plain-props): приложение владеет cookie согласия, синхронизацией между вкладками и подавлением баннера на нужных маршрутах — и управляет open.

Prop	Тип	Описание
`open`	`boolean`	Показан ли баннер.
`onAccept`	`() => void`	Клик «Принять» (приложение пишет cookie).
`children`	`ReactNode`	Заменяет текст согласия по умолчанию.
`policyHref`	`string`	Ссылка на политику cookie (по умолчанию `/cookies`).
`policyLabel`	`ReactNode`	Текст ссылки на политику.
`acceptLabel`	`ReactNode`	Подпись кнопки (по умолчанию «Принять»).
`className`	`string`	Доп. классы для карточки баннера.

На этой странице

Установка Использование API