added customButtonProps (#147)

This commit is contained in:
Oskar Filipowicz 2022-02-08 17:12:46 +01:00 committed by GitHub
parent 91d86af611
commit 541194819b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 0 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).
## [next]
- added `customButtonProps` that allows to use custom props with the button component. Specifically useful for library buttons components, for e.g. MUI Button.
## [[7.2.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.1) ## [[7.2.1]](https://github.com/Mastermindzh/react-cookie-consent/releases/tag/7.2.1)
- hideOnDecline added to typescript files - hideOnDecline added to typescript files

View File

@ -183,6 +183,7 @@ That option would be interesting if you want to allow user to change their conse
| customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div | | customContainerAttributes | object | `{}` | Allows you to set custom (data) attributes on the container div |
| 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 |
## Debugging it ## Debugging it

1
src/index.d.ts vendored
View File

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

View File

@ -292,6 +292,7 @@ class CookieConsent extends Component {
ariaDeclineLabel, ariaDeclineLabel,
customContainerAttributes, customContainerAttributes,
customContentAttributes, customContentAttributes,
customButtonProps,
} = this.props; } = this.props;
let myStyle = {}; let myStyle = {};
@ -359,6 +360,7 @@ 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}
@ -452,6 +454,7 @@ CookieConsent.propTypes = {
acceptOnScrollPercentage: PropTypes.number, acceptOnScrollPercentage: PropTypes.number,
customContentAttributes: PropTypes.object, customContentAttributes: PropTypes.object,
customContainerAttributes: PropTypes.object, customContainerAttributes: PropTypes.object,
customButtonProps: PropTypes.object,
}; };
CookieConsent.defaultProps = { CookieConsent.defaultProps = {
@ -493,6 +496,7 @@ CookieConsent.defaultProps = {
acceptOnScrollPercentage: 25, acceptOnScrollPercentage: 25,
customContentAttributes: {}, customContentAttributes: {},
customContainerAttributes: {}, customContainerAttributes: {},
customButtonProps: {},
}; };
export default CookieConsent; export default CookieConsent;