Pass classname and id to root component

Signed-off-by: Stevche Radevski <stevche@balena.io>
teodosii · Sep 27, 2019 · 51f6f76 · 51f6f76
1 parent a9c2fe9
commit 51f6f76
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/react-notification-component.js b/src/react-notification-component.js
@@ -92,14 +92,15 @@ export default class ReactNotificationComponent extends React.Component {
     />);
   }
 
-  renderMobileNotifications() {
+  renderMobileNotifications(otherProps) {
+    const { className, id } = otherProps;
     const { notifications } = this.state;
     const mobileNotifications = getNotificationsForMobileView(notifications);
     const top = this.renderNotifications(mobileNotifications.top);
     const bottom = this.renderNotifications(mobileNotifications.bottom);
 
     return (
-      <div className='react-notification-root'>
+      <div className={`react-notification-root ${className || ''}`} id={id}>
         <div className='notification-container-mobile-top'>
           {top}
         </div>
@@ -110,7 +111,8 @@ export default class ReactNotificationComponent extends React.Component {
     );
   }
 
-  renderScreenNotifications() {
+  renderScreenNotifications(otherProps) {
+    const { className, id } = otherProps;
     const { notifications } = this.state;
     const notificationsPerContainer = getNotificationsForEachContainer(notifications);
     const topLeft = this.renderNotifications(notificationsPerContainer.topLeft);
@@ -121,7 +123,7 @@ export default class ReactNotificationComponent extends React.Component {
     const bottomCenter = this.renderNotifications(notificationsPerContainer.bottomCenter);
 
     return (
-      <div className='react-notification-root'>
+      <div className={`react-notification-root ${className || ''}`} id={id}>
         <div className='notification-container-top-left'>
           {topLeft}
         </div>
@@ -145,14 +147,14 @@ export default class ReactNotificationComponent extends React.Component {
   }
 
   render() {
-    const { isMobile } = this.props;
+    const { isMobile, ...otherProps } = this.props;
     const { width, breakpoint } = this.state;
 
     if (isMobile && width <= breakpoint) {
-      return this.renderMobileNotifications();
+      return this.renderMobileNotifications(otherProps);
     }
 
-    return this.renderScreenNotifications();
+    return this.renderScreenNotifications(otherProps);
   }
 }