mastermindzh/react-cookie-consent
1
0
Fork 0
mirror of https://github.com/Mastermindzh/react-cookie-consent.git synced 2024-10-22 16:48:15 +02:00
Code Issues Projects Releases Wiki Activity

added customButtonWrapperAttributes prop (#167)

Browse Source 
* added customButtonWrapperAttributes prop

* escape characters in README
This commit is contained in:
Oskar Filipowicz 2022-07-26 14:43:44 +02:00 committed by GitHub
parent a7ce2de923
commit d05509bf04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 58 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,6 +5,10 @@ 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).
## [next]
- Added `customButtonWrapperAttributes` prop which allows to add custom attributes to the button wrapper div
## [[7.5.0]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.5.0)
- Added `customDeclineButtonProps` to add custom properties to the decline button

5
README.md
View File

@ -138,7 +138,7 @@ That option would be interesting if you want to allow user to change their conse
## 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. |
| visible | string, "show", "hidden" or "byCookieValue" | "byCookieValue" | Force the consent bar visibility. If "byCookieValue", visibility are defined by cookie consent existence. |
| children | string or React component | | Content to appear inside the bar |
@ -159,6 +159,7 @@ That option would be interesting if you want to allow user to change their conse
| 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 |
| customButtonWrapperAttributes | `React.HTMLAttributes<HTMLDivElement>` | `{}` | Allows you to set custom (data) attributes on the button wrapper div |
| 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 |
@ -174,7 +175,7 @@ That option would be interesting if you want to allow user to change their conse
| 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. |
| cookieSecurity | boolean | undefined | Cookie security level. Defaults to true unless running on http. |
| ariaAcceptLabel | string | Accept cookies | Aria label to set on the accept button |
| ariaDeclineLabel | string | Decline cookies | Aria label to set on the decline button |
| acceptOnScroll | boolean | false | Defines whether "accept" should be fired after the user scrolls a certain distance (see acceptOnScrollPercentage) |

1
src/index.d.ts vendored
View File

@ -49,6 +49,7 @@ export interface CookieConsentProps {
customContainerAttributes?: object;
customButtonProps?: object;
customDeclineButtonProps?: object;
customButtonWrapperAttributes?: React.HTMLAttributes<HTMLDivElement>;
}
export default class CookieConsent extends React.Component<CookieConsentProps, {}> {}

5
src/index.js
View File

@ -294,6 +294,7 @@ class CookieConsent extends Component {
customContentAttributes,
customButtonProps,
customDeclineButtonProps,
customButtonWrapperAttributes,
} = this.props;
let myStyle = {};
@ -399,7 +400,7 @@ class CookieConsent extends Component {
<div style={myContentStyle} className={contentClasses} {...customContentAttributes}>
{this.props.children}
</div>
<div className={`${buttonWrapperClasses}`}>
<div className={`${buttonWrapperClasses}`} {...customButtonWrapperAttributes}>
{buttonsToRender.map((button) => {
return button;
})}
@ -458,6 +459,7 @@ CookieConsent.propTypes = {
customContainerAttributes: PropTypes.object,
customButtonProps: PropTypes.object,
customDeclineButtonProps: PropTypes.object,
customButtonWrapperAttributes: PropTypes.object,
};
CookieConsent.defaultProps = {
@ -501,6 +503,7 @@ CookieConsent.defaultProps = {
customContainerAttributes: {},
customButtonProps: {},
customDeclineButtonProps: {},
customButtonWrapperAttributes: {},
};
export default CookieConsent;