Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-cookie-consent

Package Overview
Dependencies
Maintainers
1
Versions
81
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cookie-consent

A small, simple and customizable cookie consent bar for use in React applications.

  • 1.1.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
55K
decreased by-26.91%
Maintainers
1
Weekly downloads
 
Created
Source

A small, simple and customizable cookie consent bar for use in React applications.

NPM

Demo: https://mastermindzh.github.io/react-cookie-consent/

Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example

Default look

default look

Installation

npm install react-cookie-consent

or use yarn:

yarn add react-cookie-consent

Using it

You can import the cookie bar like this:

import CookieConsent from "react-cookie-consent";

If you want to set/remove cookies yourself you can optionally import Cookie (straight from js-cookie) like this:

import CookieConsent, { Cookies } from "react-cookie-consent";

Then you can use the component anywhere in your React app like so:

<CookieConsent>
    This website uses cookies to enhance the user experience.
</CookieConsent>

You can optionally set some props like this (next chapter will show all props):

<CookieConsent
    location="bottom"
    buttonText="Sure man!!"
    cookieName="myAwesomeCookieName2"
    style={{ background: "#2B373B" }}
    buttonStyle={{ color: "#4e503b", fontSize: "13px" }}
>
    This website uses cookies to enhance the user experience.{" "}
    <span style={{ fontSize: "10px" }}>
    This bit of text is smaller :O
    </span>
</CookieConsent>

One of the props (onAccept) is a function, this function will be called after the user has clicked the accept button. You can provide a function like so:

<CookieConsent
    onAccept={() => {alert("yay!")}}
>

</CookieConsent>

Props

PropTypeDefault valueDescription
locationstring, either "top" or "bottom""bottom"Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window.
childrenstring or React componentContent to appear inside the bar
disableStylesbooleanfalseIf enabled the component will have no default style. (you can still supply style through props)
buttonTextstring or React component"I understand"Text to appear on the button
cookieNamestring"CookieConsent"Name of the cookie used to track whether the user has agreed.
onAcceptfunction() => {}Function to be called after the accept button has been clicked.
styleobjectlook at sourceReact styling object for the bar.
buttonStyleobjectlook at sourceReact styling object for the button.
contentStyleobjectlook at sourceReact styling object for the content.
debugbooleanundefinedCookie is removed to debug styling.

Styling it

You can provide styling for the bar, the button and the content. Note that the bar has a display: flex property as default and is parent to its children "content" and "button".

The styling behaves kind of responsive. The minimum content width has been chosen to be "300px" as a default value. If the button does not fit into the same line it is wrapped around into the next line.

You can style each component by using the style, buttonStyle and contentStyle prop. These will append / replace the default styles of the components.

You can use disableStyles={true} to disable any built-in styling.

Examples

changing the bar background to red
<CookieConsent
    style={{ background: "red" }}
>
</CookieConsent>
changing the button font-weight to bold
<CookieConsent
    buttonStyle={{ fontWeight: "bold" }}
>
</CookieConsent>
rainbows!

rainbows!

If you're crazy enough you can even make a rainbow colored bar:

<CookieConsent
    buttonText="OMG DOUBLE RAINBOW"
    cookieName="myAwesomeCookieName2"
    style={{ background: "linear-gradient(to right, orange , yellow, green, cyan, blue, violet)", textShadow: "2px 2px black" }}
    buttonStyle={{background: "linear-gradient(to left, orange , yellow, green, cyan, blue, violet)", color:"white", fontWeight: "bolder", textShadow: "2px 2px black"}}
>
    This website uses cookies to enhance the user experience.{" "}
    <span style={{ fontSize: "10px" }}>
    This bit of text is smaller :O
    </span>
</CookieConsent>

Debugging it

Because the cookie consent bar will be hidden once accepted, you will have to set the prop debug={true} to evaluate styling changes:

<CookieConsent
    debug={true}
>
</CookieConsent>

Note: Dont forget to remove the debug-property for production.

Keywords

FAQs

Package last updated on 31 May 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc