From 8561858333193964d84960beb5c85c8d52c5e5c3 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Thu, 18 Jun 2020 18:27:49 +0200 Subject: [PATCH] adding some pretty badges :) --- README.md | 87 +++++++++++++++++++++++++++---------------------------- 1 file changed, 42 insertions(+), 45 deletions(-) diff --git a/README.md b/README.md index 1b10ca3..64ae903 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Demo: https://mastermindzh.github.io/react-cookie-consent/ Example branch: https://github.com/Mastermindzh/react-cookie-consent/tree/example +![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) + ## Default look ![default look](https://raw.githubusercontent.com/Mastermindzh/react-cookie-consent/master/images/default.png) @@ -111,45 +113,45 @@ If the decline button is enabled then the (onDecline) prop function can be used, ## Props -| Prop | Type | Default value | Description | -| ------------------------ | :-------------------------------: | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. | -| 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) | -| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | -| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) | -| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled | -| buttonText | string or React component | "I understand" | Text to appear on the button | -| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | -| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | -| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | -| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | -| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | -| onAccept | function | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. | -| onDecline | function | `() => {}` | Function to be called after the decline 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. | -| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | -| overlay | boolean | false | Whether to show a page obscuring overlay or not. | -| containerClasses | string | "" | CSS classes to apply to the surrounding container | -| buttonClasses | string | "" | CSS classes to apply to the button | -| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | -| declineButtonClasses | string | "" | CSS classes to apply to the decline button | -| buttonId | string | "" | Id to apply to the button | -| declineButtonId | string | "" | Id to apply to the decline button | -| contentClasses | string | "" | CSS classes to apply to the content | -| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | -| style | object | [look at source][style] | React styling object for the bar. | -| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | -| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | -| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | -| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | -| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | -| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | -| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | -| ButtonComponent | React component | button | React Component to render as a button. | -| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | -| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | +| Prop | Type | Default value | Description | +| ------------------------ | :-------------------------------: | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | +| location | string, "top", "bottom" or "none" | "bottom" | Syntactic sugar to easily enable you to place the bar at the top or the bottom of the browser window. Use "none" to disable. | +| 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) | +| hideOnAccept | boolean | true | If disabled the component will not hide it self after the accept button has been clicked. You will need to hide yourself (see onAccept) | +| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) | +| acceptOnScrollPercentage | number | 25 | Percentage of the page height the user has to scroll to trigger the accept function if acceptOnScroll is enabled | +| buttonText | string or React component | "I understand" | Text to appear on the button | +| declineButtonText | string or React component | "I decline" | Text to appear on the decline button | +| cookieName | string | "CookieConsent" | Name of the cookie used to track whether the user has agreed. | +| cookieValue | string or boolean or number | true | Value to be saved under the cookieName. | +| declineCookieValue | string or boolean or number | false | Value to be saved under the cookieName when declined. | +| setDeclineCookie | boolean | true | Whether to set a cookie when the user clicks "decline" | +| onAccept | function | `({ acceptedByScrolling }) => {}` | Function to be called after the accept button has been clicked. | +| onDecline | function | `() => {}` | Function to be called after the decline 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. | +| extraCookieOptions | object | `{}` | Extra info (apart from expiry date) to add to the cookie | +| overlay | boolean | false | Whether to show a page obscuring overlay or not. | +| containerClasses | string | "" | CSS classes to apply to the surrounding container | +| buttonClasses | string | "" | CSS classes to apply to the button | +| buttonWrapperClasses | string | "" | CSS classes to apply to the div wrapping the buttons | +| declineButtonClasses | string | "" | CSS classes to apply to the decline button | +| buttonId | string | "" | Id to apply to the button | +| declineButtonId | string | "" | Id to apply to the decline button | +| contentClasses | string | "" | CSS classes to apply to the content | +| overlayClasses | string | "" | CSS classes to apply to the surrounding overlay | +| style | object | [look at source][style] | React styling object for the bar. | +| buttonStyle | object | [look at source][buttonstyle] | React styling object for the button. | +| declineButtonStyle | object | [look at source][declinebuttonstyle] | React styling object for the decline button. | +| contentStyle | object | [look at source][contentstyle] | React styling object for the content. | +| overlayStyle | object | [look at source][overlaystyle] | React styling object for the overlay. | +| disableButtonStyles | boolean | false | If enabled the button will have no default style. (you can still supply style through props) | +| enableDeclineButton | boolean | false | If enabled the decline button will be rendered | +| flipButtons | boolean | false | If enabled the accept and decline buttons will be flipped | +| ButtonComponent | React component | button | React Component to render as a button. | +| sameSite | string, "strict", "lax" or "none" | none | Cookies sameSite attribute value | +| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. | ## Debugging it @@ -278,12 +280,7 @@ If you're crazy enough you can even make a rainbow colored bar: You can also generate a page-obfuscating overlay that will prevent actions other than interacting with the cookie consent button(s). ```js - + This website uses cookies to enhance the user experience. ```