簡介
隱私和資料保護是現代網站的基本考慮因素，因此在 React 應用程式中添加 cookie 同意橫幅可確保遵守資料隱私法規，例如 GDPR。在本教程中，我們將使用react-cookie-consent庫輕鬆地將cookie同意橫幅添加到我們的應用程式中，並對其進行自訂以使用戶能夠控制cookie首選項。
第 1 步：設定你的 React 項目
如果您尚未設定 React 項目，請使用以下命令建立項目：
npx create-react-app cookie-consent-demo cd cookie-consent-demo
第2步：安裝react-cookie-consent
react-cookie-consent 程式庫簡化了在您的應用程式中新增 cookie 同意橫幅的流程。使用npm或yarn安裝它：
npm install react-cookie-consent # or yarn add react-cookie-consent
第 3 步：基本實作
安裝程式庫後，請前往主應用程式檔案（通常是 App.js 或 App.tsx）並新增 cookie 同意元件。這是基本設定：
import React from "react";
import CookieConsent from "react-cookie-consent";
function App() {
return (
<div className="App">
<h1>Welcome to My Website</h1>
{/* Basic Cookie Consent */}
<CookieConsent
location="bottom"
buttonText="I understand"
cookieName="myWebsiteCookieConsent"
style={{ background: "#2B373B" }}
buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
expires={150}
>
This website uses cookies to enhance your browsing experience.{" "}
<a href="/privacy-policy" style={{ color: "#f5e042" }}>
Learn more
</a>
</CookieConsent>
</div>
);
}
export default App;
第 4 步：自訂同意橫幅
要讓同意橫幅更具吸引力或添加「全部接受」和「拒絕」等選項，您可以擴展該組件。
<CookieConsent
location="bottom"
enableDeclineButton
declineButtonText="Decline"
buttonText="Accept All"
cookieName="myWebsiteCookieConsent"
style={{ background: "#000" }}
buttonStyle={{ color: "#fff", fontSize: "14px" }}
declineButtonStyle={{
color: "#fff",
background: "#c0392b",
fontSize: "14px",
}}
expires={365}
onAccept={() => {
console.log("Cookies accepted");
}}
onDecline={() => {
console.log("Cookies declined");
}}
>
We use cookies to improve user experience. By clicking "Accept All," you consent to the use of cookies.
</CookieConsent>
結論
新增 cookie 同意橫幅對於使用者隱私和法規遵循至關重要，而 react-cookie-consent 使其易於實現。您可以進一步自訂橫幅，以符合您網站的設計和訊息傳遞，並回應使用者的選擇，以增強對基於 cookie 的功能的控制。
以上是如何透過react-cookie-consent在React應用程式中使用Cookie Consent的詳細內容。更多資訊請關注PHP中文網其他相關文章！
