Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-cookie-consent
Advanced tools
A small, simple and customizable cookie consent bar for use in React applications.
A small, simple and customizable cookie consent bar for use in React applications.
Demo: https://mastermindzh.github.io/react-cookie-consent/
Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example
npm install react-cookie-consent
or use yarn:
yarn add react-cookie-consent
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" }}
expires={150}
>
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>
Prop | Type | Default value | Description |
---|---|---|---|
location | string, 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. |
children | string or React component | Content to appear inside the bar | |
disableStyles | boolean | false | If enabled the component will have no default style. (you can still supply style through props) |
buttonText | string or React component | "I understand" | Text to appear on the button |
cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. |
onAccept | function | () => {} | Function to be called after the accept button has been clicked. |
debug | boolean | undefined | Bar will be drawn regardless of cookie for debugging purposes. |
expires | number | 365 | Number of days before the cookie expires. |
containerClasses | string | "" | CSS classes to apply to the surrounding container |
buttonClasses | string | "" | CSS classes to apply to the button |
contentClasses | string | "" | CSS classes to apply to the content |
style | object | look at source | React styling object for the bar. |
buttonStyle | object | look at source | React styling object for the button. |
contentStyle | object | look at source | React styling object for the content. |
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.
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.
Alternatively you can provide CSS classnames as containerClasses
, buttonClasses
and contentClasses
to apply predefined CSS classes.
You can use disableStyles={true}
to disable any built-in styling.
<CookieConsent
style={{ background: "red" }}
>
</CookieConsent>
<CookieConsent
buttonStyle={{ fontWeight: "bold" }}
>
</CookieConsent>
You can pass predefined CSS classes to the components using the containerClasses
, buttonClasses
and contentClasses
props. The example below uses bootstrap classes:
<CookieConsent
disableStyles={true}
location={OPTIONS.BOTTOM}
buttonClasses="btn btn-primary"
containerClasses="alert alert-warning col-lg-12"
contentClasses="text-capitalize"
>
This website uses cookies to enhance the user experience.{" "}
<span style={{ fontSize: "10px" }}>
This bit of text is smaller :O
</span>
</CookieConsent>
Which results in:
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>
FAQs
A small, simple and customizable cookie consent bar for use in React applications.
The npm package react-cookie-consent receives a total of 62,967 weekly downloads. As such, react-cookie-consent popularity was classified as popular.
We found that react-cookie-consent demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.