made all props optional and updated docs fixes #191 and #193

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "sonarlint.connectedMode.project": {
+        "connectionId": "public-sonarcloud",
+        "projectKey": "Mastermindzh_react-cookie-consent"
+    }
+}

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [[9.0.0]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/9.0.0)]
+
+Made all props optional and fixed documentation.
+Fixes [#191](https://github.com/Mastermindzh/react-cookie-consent/issues/191) and [#193](https://github.com/Mastermindzh/react-cookie-consent/issues/193)
+
 ## [[8.0.1]((https://github.com/Mastermindzh/react-cookie-consent/releases/tag/8.0.1)]
 
 ~~Second try of [np](https://github.com/sindresorhus/np)...~~
@@ -16,7 +21,7 @@ np is not my thing.. reverted to old release strategy
 - Switched to tsdx and Typescript
 - Added storybook with examples from readme
 
-## [[7.6.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0]
+## [[7.6.0]](<https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.6.0>]
 
 - Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div
 

README.md

@@ -4,7 +4,7 @@ A small, simple and customizable cookie consent bar for use in React application
 
 [![NPM](https://nodei.co/npm/react-cookie-consent.png)](https://npmjs.org/package/react-cookie-consent)
 
-Demo (storybook): https://mastermindzh.github.io/react-cookie-consent/
+Demo (storybook): <https://mastermindzh.github.io/react-cookie-consent/>
 
 ![Downloads](https://img.shields.io/npm/dm/react-cookie-consent) ![Dependent repos (via libraries.io)](https://img.shields.io/librariesio/dependent-repos/npm/react-cookie-consent) ![GitHub contributors](https://img.shields.io/github/contributors/mastermindzh/react-cookie-consent) ![Minified size](https://img.shields.io/bundlephobia/min/react-cookie-consent) ![npm type definitions](https://img.shields.io/npm/types/react-cookie-consent) ![license-mit](https://img.shields.io/badge/license-MIT-green)
 
@@ -16,13 +16,17 @@ Demo (storybook): https://mastermindzh.github.io/react-cookie-consent/
 
 <!-- toc -->
 
-- [Installation](#installation)
-- [Using it](#using-it)
+- [:cookie: react-cookie-consent :cookie:](#cookie-react-cookie-consent-cookie)
+  - [Default look](#default-look)
+  - [Table of contents](#table-of-contents)
+  - [Installation](#installation)
+  - [Using it](#using-it)
     - [getting the cookies value in your own code](#getting-the-cookies-value-in-your-own-code)
-- [Props](#props)
-- [Debugging it](#debugging-it)
-- [Why are there two cookies? One of which named "Legacy"](#why-are-there-two-cookies-one-of-which-named-legacy)
-- [Styling it](#styling-it)
+    - [reset the cookies value in your own code](#reset-the-cookies-value-in-your-own-code)
+  - [Props](#props)
+  - [Debugging it](#debugging-it)
+  - [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)
@@ -30,10 +34,10 @@ Demo (storybook): https://mastermindzh.github.io/react-cookie-consent/
       - [Accept on scroll](#accept-on-scroll)
       - [Flipping the buttons](#flipping-the-buttons)
       - [Extra cookie options](#extra-cookie-options)
-    - [Rainbows!](#rainbows)
+      - [Rainbows](#rainbows)
       - [Overlay](#overlay)
-- [Contributor information](#contributor-information)
-- [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
+  - [Contributor information](#contributor-information)
+  - [Projects using react-cookie-consent](#projects-using-react-cookie-consent)
 
 <!-- tocstop -->
 
@@ -113,12 +117,12 @@ If the decline button is enabled then the (onDecline) prop function can be used,
 
 ### getting the cookies value in your own code
 
-react-cookie-consent exports a function called `getCookieConsentValue`. You can use it in your own code like so:
+react-cookie-consent exports a function called `getCookieConsentValue(cookieName: string)`. You can use it in your own code like so:
 
 ```js
 import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";
 
-console.log(getCookieConsentValue());
+console.log(getCookieConsentValue("your_custom_cookie_name"));
 ```
 
 ### reset the cookies value in your own code

src/CookieConsent.props.tsx

@@ -8,54 +8,54 @@ import {
 
 export interface CookieConsentProps {
   children?: ReactNode;
-  style: React.CSSProperties;
-  buttonStyle: React.CSSProperties;
-  declineButtonStyle: React.CSSProperties;
-  contentStyle: React.CSSProperties;
-  disableStyles: boolean;
-  hideOnAccept: boolean;
-  hideOnDecline: boolean;
-  onAccept: (acceptedByScrolling: boolean) => void;
-  onDecline: () => void;
-  buttonText: string | ReactNode | Function;
-  declineButtonText: string | ReactNode | Function;
-  cookieName: string;
-  cookieValue: string | object;
-  declineCookieValue: string | object;
-  setDeclineCookie: boolean;
-  debug: boolean;
-  expires: number;
-  containerClasses: string;
-  contentClasses: string;
-  buttonClasses: string;
-  buttonWrapperClasses: string;
-  declineButtonClasses: string;
-  buttonId: string;
-  declineButtonId: string;
-  overlayClasses: string;
-  ariaAcceptLabel: string;
-  ariaDeclineLabel: string;
-  disableButtonStyles: boolean;
-  enableDeclineButton: boolean;
-  flipButtons: boolean;
+  style?: React.CSSProperties;
+  buttonStyle?: React.CSSProperties;
+  declineButtonStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
+  disableStyles?: boolean;
+  hideOnAccept?: boolean;
+  hideOnDecline?: boolean;
+  onAccept?: (acceptedByScrolling: boolean) => void;
+  onDecline?: () => void;
+  buttonText?: string | ReactNode | Function;
+  declineButtonText?: string | ReactNode | Function;
+  cookieName?: string;
+  cookieValue?: string | object;
+  declineCookieValue?: string | object;
+  setDeclineCookie?: boolean;
+  debug?: boolean;
+  expires?: number;
+  containerClasses?: string;
+  contentClasses?: string;
+  buttonClasses?: string;
+  buttonWrapperClasses?: string;
+  declineButtonClasses?: string;
+  buttonId?: string;
+  declineButtonId?: string;
+  overlayClasses?: string;
+  ariaAcceptLabel?: string;
+  ariaDeclineLabel?: string;
+  disableButtonStyles?: boolean;
+  enableDeclineButton?: boolean;
+  flipButtons?: boolean;
   cookieSecurity?: boolean;
-  overlay: boolean;
-  acceptOnOverlayClick: boolean;
-  acceptOnScroll: boolean;
-  acceptOnScrollPercentage: number;
-  ButtonComponent: any;
-  extraCookieOptions: Object;
-  overlayStyle: Object;
-  customContentAttributes: Object;
-  customContainerAttributes: Object;
-  customButtonProps: Object;
-  customDeclineButtonProps: Object;
-  customButtonWrapperAttributes: Object;
-  onOverlayClick: () => void;
+  overlay?: boolean;
+  acceptOnOverlayClick?: boolean;
+  acceptOnScroll?: boolean;
+  acceptOnScrollPercentage?: number;
+  ButtonComponent?: any;
+  extraCookieOptions?: Object;
+  overlayStyle?: Object;
+  customContentAttributes?: Object;
+  customContainerAttributes?: Object;
+  customButtonProps?: Object;
+  customDeclineButtonProps?: Object;
+  customButtonWrapperAttributes?: Object;
+  onOverlayClick?: () => void;
   // these should be enums
-  location: string;
-  visible: string;
-  sameSite: "strict" | "Strict" | "lax" | "Lax" | "none" | "None" | undefined;
+  location?: string;
+  visible?: string;
+  sameSite?: "strict" | "Strict" | "lax" | "Lax" | "none" | "None";
 }
 
 const DefaultButtonComponent: FunctionComponent<{ children: ReactNode; [x: string]: any }> = ({
@@ -65,13 +65,13 @@ const DefaultButtonComponent: FunctionComponent<{ children: ReactNode; [x: strin
   return <button {...props}>{children}</button>;
 };
 
-export const defaultCookieConsentProps: CookieConsentProps = {
+export const defaultCookieConsentProps = {
   disableStyles: false,
   hideOnAccept: true,
   hideOnDecline: true,
   location: POSITION_OPTIONS.BOTTOM,
   visible: VISIBILITY_OPTIONS.BY_COOKIE_VALUE,
-  onAccept: (_acceptedByScrolling) => {},
+  onAccept: (_acceptedByScrolling: boolean) => {},
   onDecline: () => {},
   cookieName: defaultCookieConsentName,
   cookieValue: "true",

src/CookieConsent.tsx

@@ -33,7 +33,10 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
    * Set a persistent accept cookie
    */
   accept(acceptedByScrolling = false) {
-    const { cookieName, cookieValue, hideOnAccept, onAccept } = this.props;
+    const { cookieName, cookieValue, hideOnAccept, onAccept } = {
+      ...defaultCookieConsentProps,
+      ...this.props,
+    };
 
     this.setCookie(cookieName, cookieValue);
 
@@ -49,7 +52,10 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
    * Handle a click on the overlay
    */
   overlayClick() {
-    const { acceptOnOverlayClick, onOverlayClick } = this.props;
+    const { acceptOnOverlayClick, onOverlayClick } = {
+      ...defaultCookieConsentProps,
+      ...this.props,
+    };
     if (acceptOnOverlayClick) {
       this.accept();
     }
@@ -60,8 +66,10 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
    * Set a persistent decline cookie
    */
   decline() {
-    const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } =
-      this.props;
+    const { cookieName, declineCookieValue, hideOnDecline, onDecline, setDeclineCookie } = {
+      ...defaultCookieConsentProps,
+      ...this.props,
+    };
 
     if (setDeclineCookie) {
       this.setCookie(cookieName, declineCookieValue);
@@ -113,7 +121,7 @@ export class CookieConsent extends Component<CookieConsentProps, CookieConsentSt
    * checks whether scroll has exceeded set amount and fire accept if so.
    */
   handleScroll = () => {
-    const { acceptOnScrollPercentage } = this.props;
+    const { acceptOnScrollPercentage } = { ...defaultCookieConsentProps, ...this.props };
 
     // (top / height) - height * 100
     const rootNode = document.documentElement;

src/components/ConditionalWrapper.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, ReactNode } from "react";
 
 type Props = {
-  condition: boolean;
+  condition?: boolean;
   wrapper: (_: ReactNode) => any;
   children: ReactNode;
 };