Support React 17 (#96)

Co-authored-by: Ubuntu <ubuntu@ip-172-31-14-150.eu-north-1.compute.internal>

.gitignore

@@ -1 +1,2 @@
 node_modules
+build/index.js.LICENSE.txt

README.md

@@ -25,13 +25,13 @@ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/exampl
 - [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies--one-of-which-named--legacy-)
 - [Styling it](#styling-it)
   - [Examples](#examples)
-    - [changing the bar background to red](#changing-the-bar-background-to-red)
-    - [changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
+    - [Changing the bar background to red](#changing-the-bar-background-to-red)
+    - [Changing the button font-weight to bold](#changing-the-button-font-weight-to-bold)
     - [Using predefined CSS classes](#using-predefined-css-classes)
     - [Flipping the buttons](#flipping-the-buttons)
     - [Extra cookie options](#extra-cookie-options)
-    - [rainbows!](#rainbows)
-- [contributor information](#contributor-information)
+    - [Rainbows!](#rainbows)
+- [Contributor information](#contributor-information)
 - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
 
 <!-- tocstop -->
@@ -186,13 +186,13 @@ You can use `disableStyles={true}` to disable any built-in styling.
 
 ### Examples
 
-#### changing the bar background to red
+#### Changing the bar background to red
 
 ```js
 <CookieConsent style={{ background: "red" }}></CookieConsent>
 ```
 
-#### changing the button font-weight to bold
+#### Changing the button font-weight to bold
 
 ```js
 <CookieConsent buttonStyle={{ fontWeight: "bold" }}></CookieConsent>
@@ -241,7 +241,7 @@ You can add more cookie options using the extraCookieOptions parameter like so:
 <CookieConsent extraCookieOptions={{ domain: "myexample.com" }}>cookie bar</CookieConsent>
 ```
 
-#### rainbows!
+#### Rainbows!
 
 ![rainbows!](https://github.com/Mastermindzh/react-cookie-consent/blob/master/images/rainbow.png?raw=true)
 
@@ -287,7 +287,7 @@ You can also generate a page-obfuscating overlay that will prevent actions other
 [contentstyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L52-L55
 [overlaystyle]: https://github.com/Mastermindzh/react-cookie-consent/blob/master/src/index.js#L62-L69
 
-## contributor information
+## Contributor information
 
 When making a PR please think about the following things:
 

build/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: ({ acceptedByScrolling }: { acceptedByScrolling?: boolean }) => void;
+  onAccept?: Function;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;
@@ -29,8 +29,6 @@ export interface CookieConsentProps {
   declineButtonClasses?: string;
   buttonId?: string;
   declineButtonId?: string;
-  acceptOnScroll?: boolean;
-  acceptOnScrollPercentage?: number;
   extraCookieOptions?: object;
   disableButtonStyles?: boolean;
   enableDeclineButton?: boolean;

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cookie-consent",
-  "version": "5.2.0",
+  "version": "6.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -4,7 +4,7 @@
     "name": "Rick van Lieshout",
     "email": "info@rickvanlieshout.com"
   },
-  "version": "5.2.0",
+  "version": "6.0.0",
   "description": "A small, simple and customizable cookie consent bar for use in React applications.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -13,7 +13,7 @@
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": "^16.13.1"
+    "react": "^16.13.1 || ^17.0.0"
   },
   "scripts": {
     "build": "webpack",

src/index.d.ts

@@ -12,7 +12,7 @@ export interface CookieConsentProps {
   children?: React.ReactNode;
   disableStyles?: boolean;
   hideOnAccept?: boolean;
-  onAccept?: () => void;
+  onAccept?: Function;
   onDecline?: Function;
   buttonText?: Function | React.ReactNode;
   declineButtonText?: Function | React.ReactNode;

src/index.js

@@ -28,7 +28,6 @@ const ConditionalWrapper = ({ condition, wrapper, children }) => {
 class CookieConsent extends Component {
   constructor(props) {
     super(props);
-    this.accept.bind(this);
 
     this.state = {
       visible: false,
@@ -281,7 +280,9 @@ class CookieConsent extends Component {
         className={buttonClasses}
         id={buttonId}
         aria-label={ariaAcceptLabel}
-        onClick={this.accept}
+        onClick={() => {
+          this.accept();
+        }}
       >
         {buttonText}
       </ButtonComponent>