Added to add custom properties to the decline button

This commit is contained in:
Rick van Lieshout 2022-06-18 14:29:39 +02:00
parent d1c7252546
commit ecb5f30a7c
4 changed files with 11 additions and 1 deletions

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/), 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). and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [[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
## [[7.4.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.1) ## [[7.4.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.4.1)
- Small version error in package.json that actually didn't make it work with React 18 - Small version error in package.json that actually didn't make it work with React 18

View File

@ -184,6 +184,7 @@ That option would be interesting if you want to allow user to change their conse
| onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay | | onOverlayClick | function | `() => {}` | allows you to react to a click on the overlay |
| acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay | | acceptOnOverlayClick | boolean | false | Determines whether the cookies should be accepted after clicking on the overlay |
| customButtonProps | object | `{}` | Allows you to set custom props on the button component | | customButtonProps | object | `{}` | Allows you to set custom props on the button component |
| customDeclineButtonProps | object | `{}` | Allows you to set custom props on the decline button component |
## Debugging it ## Debugging it

1
src/index.d.ts vendored
View File

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

View File

@ -293,6 +293,7 @@ class CookieConsent extends Component {
customContainerAttributes, customContainerAttributes,
customContentAttributes, customContentAttributes,
customButtonProps, customButtonProps,
customDeclineButtonProps,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@ -352,6 +353,7 @@ class CookieConsent extends Component {
onClick={() => { onClick={() => {
this.decline(); this.decline();
}} }}
{...customDeclineButtonProps}
> >
{declineButtonText} {declineButtonText}
</ButtonComponent> </ButtonComponent>
@ -360,7 +362,6 @@ class CookieConsent extends Component {
// add accept button // add accept button
buttonsToRender.push( buttonsToRender.push(
<ButtonComponent <ButtonComponent
{...customButtonProps}
key="acceptButton" key="acceptButton"
style={myButtonStyle} style={myButtonStyle}
className={buttonClasses} className={buttonClasses}
@ -369,6 +370,7 @@ class CookieConsent extends Component {
onClick={() => { onClick={() => {
this.accept(); this.accept();
}} }}
{...customButtonProps}
> >
{buttonText} {buttonText}
</ButtonComponent> </ButtonComponent>
@ -455,6 +457,7 @@ CookieConsent.propTypes = {
customContentAttributes: PropTypes.object, customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object, customContainerAttributes: PropTypes.object,
customButtonProps: PropTypes.object, customButtonProps: PropTypes.object,
customDeclineButtonProps: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@ -497,6 +500,7 @@ CookieConsent.defaultProps = {
customContentAttributes: {}, customContentAttributes: {},
customContainerAttributes: {}, customContainerAttributes: {},
customButtonProps: {}, customButtonProps: {},
customDeclineButtonProps: {},
}; };
export default CookieConsent; export default CookieConsent;