mirror of
https://github.com/Mastermindzh/react-cookie-consent.git
synced 2025-05-10 07:13:47 +02:00
example branch
This commit is contained in:
parent
b40e699a93
commit
9a67cb9779
23
.gitignore
vendored
23
.gitignore
vendored
@ -1,2 +1,21 @@
|
||||
node_modules
|
||||
package-lock.json
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2018 Rick van Lieshout
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
143
README.md
143
README.md
@ -1,142 +1,5 @@
|
||||
# :cookie: react-cookie-consent :cookie:
|
||||
# React-cookie-consent
|
||||
|
||||
A small, simple and customizable cookie consent bar for use in React applications.
|
||||
This is the example branch for react-cookie-consent.
|
||||
|
||||
[](https://npmjs.org/package/react-cookie-consent)
|
||||
|
||||
## 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:
|
||||
|
||||
```js
|
||||
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:
|
||||
```js
|
||||
import CookieConsent, { Cookies } from "react-cookie-consent";
|
||||
```
|
||||
|
||||
Then you can use the component anywhere in your React app like so:
|
||||
|
||||
```js
|
||||
<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):
|
||||
|
||||
```js
|
||||
<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:
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
onAccept={() => {alert("yay!")}}
|
||||
>
|
||||
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
## Props
|
||||
| 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. |
|
||||
| style | Object |  | React styling object for the bar. |
|
||||
| buttonStyle | Object |  | React styling object for the button. |
|
||||
|
||||
|
||||
|
||||
## Styling it
|
||||
|
||||
You can provide styling for both the bar and the button.
|
||||
You can do this using the `style` and `buttonStyle` prop, both of these will append / replace the default style of the component.
|
||||
|
||||
You can use `disableStyles={true}` to disable any built-in styling.
|
||||
|
||||
### Examples
|
||||
|
||||
#### changing the bar background to red
|
||||
|
||||
```js
|
||||
<CookieConsent
|
||||
style={{ background: "red" }}
|
||||
>
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
#### changing the button font-weight to bold
|
||||
```js
|
||||
<CookieConsent
|
||||
buttonStyle={{ fontWeight: "bold" }}
|
||||
>
|
||||
</CookieConsent>
|
||||
```
|
||||
|
||||
#### rainbows!
|
||||
|
||||
|
||||
|
||||
If you're crazy enough you can even make a rainbow colored bar:
|
||||
|
||||
```js
|
||||
<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 remove the cookie if you want to evaluate changes:
|
||||
|
||||
```js
|
||||
import CookieConsent, { Cookies } from "react-cookie-consent";
|
||||
|
||||
{Cookies.remove("myAwesomeCookieName2")}
|
||||
<CookieConsent
|
||||
cookieName="myAwesomeCookieName2"
|
||||
>
|
||||
</CookieConsent>
|
||||
```
|
||||
https://mastermindzh.github.io/react-cookie-consent/
|
||||
|
||||
1634
build/index.js
1634
build/index.js
File diff suppressed because it is too large
Load Diff
21
example/.gitignore
vendored
21
example/.gitignore
vendored
@ -1,21 +0,0 @@
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
2433
example/README.md
2433
example/README.md
File diff suppressed because it is too large
Load Diff
@ -1,17 +0,0 @@
|
||||
{
|
||||
"name": "example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"react": "^16.2.0",
|
||||
"react-cookie-consent": "^1.0.5",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-scripts": "1.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
11331
package-lock.json
generated
Normal file
11331
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
50
package.json
@ -1,43 +1,23 @@
|
||||
{
|
||||
"name": "react-cookie-consent",
|
||||
"author": {
|
||||
"name": "Rick van Lieshout",
|
||||
"email": "info@rickvanlieshout.com"
|
||||
},
|
||||
"version": "1.0.8",
|
||||
"description": "A small, simple and customizable cookie consent bar for use in React applications.",
|
||||
"main": "build/index.js",
|
||||
"name": "example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"homepage": "https://mastermindzh.github.io/react-cookie-consent",
|
||||
"dependencies": {
|
||||
"js-cookie": "^2.2.0",
|
||||
"react": "^15.5.4"
|
||||
"react": "^16.2.0",
|
||||
"react-cookie-consent": "^1.0.5",
|
||||
"react-dom": "^16.2.0",
|
||||
"react-scripts": "1.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack"
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build",
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test --env=jsdom",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/Mastermindzh/react-cookie-consent.git"
|
||||
},
|
||||
"keywords": [
|
||||
"react",
|
||||
"cookie",
|
||||
"consent",
|
||||
"cookiebar"
|
||||
],
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/Mastermindzh/react-cookie-consent/issues"
|
||||
},
|
||||
"homepage": "https://github.com/Mastermindzh/react-cookie-consent#readme",
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.24.1",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-transform-object-rest-spread": "^6.23.0",
|
||||
"babel-plugin-transform-react-jsx": "^6.24.1",
|
||||
"babel-preset-env": "^1.5.1",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-1": "^6.24.1",
|
||||
"webpack": "^2.6.1"
|
||||
"gh-pages": "^1.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
144
src/index.js
144
src/index.js
@ -1,138 +1,8 @@
|
||||
import React, { Component } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Cookies from "js-cookie";
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
|
||||
export const OPTIONS = {
|
||||
TOP: "top",
|
||||
BOTTOM: "bottom"
|
||||
};
|
||||
|
||||
class CookieConsent extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.accept.bind(this);
|
||||
|
||||
this.state = {
|
||||
visible: true,
|
||||
style: {
|
||||
position: "fixed",
|
||||
width: "100%",
|
||||
padding: "15px",
|
||||
background: "#353535",
|
||||
color: "white",
|
||||
left: "0",
|
||||
zIndex: "999",
|
||||
lineHeight: "30px",
|
||||
textAlign: "left"
|
||||
},
|
||||
buttonStyle: {
|
||||
position: "absolute",
|
||||
right: "50px",
|
||||
border: "0",
|
||||
background: "#ffd42d",
|
||||
boxShadow: "none",
|
||||
borderRadius: "0px",
|
||||
padding: "5px",
|
||||
color: "black"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount(){
|
||||
const { cookieName } = this.props;
|
||||
|
||||
if (Cookies.get(cookieName) != undefined ) {
|
||||
this.setState({ visible: false });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a persistent cookie
|
||||
*/
|
||||
accept() {
|
||||
const { cookieName } = this.props;
|
||||
|
||||
Cookies.set(cookieName, true);
|
||||
this.setState({ visible: false });
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
// If the bar shouldn't be visible don't render anything.
|
||||
if (!this.state.visible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const {
|
||||
location,
|
||||
style,
|
||||
buttonStyle,
|
||||
disableStyles,
|
||||
onAccept,
|
||||
buttonText
|
||||
} = this.props;
|
||||
|
||||
let myStyle = {},
|
||||
myButtonStyle = {};
|
||||
|
||||
if (disableStyles) {
|
||||
// if styles are disabled use the provided styles (or non)
|
||||
myStyle = Object.assign({}, style);
|
||||
myButtonStyle = Object.assign({}, buttonStyle);
|
||||
} else {
|
||||
// if styles aren't disabled merge them with the styles that are provided (or use default styles)
|
||||
myStyle = Object.assign({}, { ...this.state.style, ...style });
|
||||
myButtonStyle = Object.assign(
|
||||
{},
|
||||
{ ...this.state.buttonStyle, ...buttonStyle }
|
||||
);
|
||||
}
|
||||
|
||||
// syntactic sugar to enable user to easily select top / bottom
|
||||
switch (location) {
|
||||
case OPTIONS.TOP:
|
||||
myStyle.top = "0";
|
||||
break;
|
||||
|
||||
case OPTIONS.BOTTOM:
|
||||
myStyle.bottom = "0";
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="cookieConsent" style={myStyle}>
|
||||
{this.props.children}
|
||||
<button
|
||||
style={myButtonStyle}
|
||||
onClick={() => {
|
||||
this.accept();
|
||||
onAccept();
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CookieConsent.propTypes = {
|
||||
location: PropTypes.oneOf(["top", "bottom"]),
|
||||
style: PropTypes.object,
|
||||
buttonStyle: PropTypes.object,
|
||||
children: PropTypes.any, // eslint-disable-line react/forbid-prop-types
|
||||
disableStyles: PropTypes.bool,
|
||||
onAccept: PropTypes.func,
|
||||
buttonText: PropTypes.oneOfType([PropTypes.string,PropTypes.func,PropTypes.element]),
|
||||
cookieName: PropTypes.string
|
||||
};
|
||||
CookieConsent.defaultProps = {
|
||||
disableStyles: false,
|
||||
location: OPTIONS.BOTTOM,
|
||||
onAccept: () => {},
|
||||
cookieName: "CookieConsent",
|
||||
buttonText: "I understand"
|
||||
};
|
||||
|
||||
export default CookieConsent;
|
||||
export {Cookies};
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
|
||||
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
@ -1,27 +0,0 @@
|
||||
var path = require('path');
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
filename: 'index.js',
|
||||
libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: path.resolve(__dirname, 'src'),
|
||||
exclude: /(node_modules|bower_components|build)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: ['env']
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
externals: {
|
||||
'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user