From 9b9dd1f1f289744d50ae137fb8b807ba8c2c76c9 Mon Sep 17 00:00:00 2001
From: Alexandru Pavaloi <alexandru.pavaloi@tapwater.io>
Date: Fri, 3 Jul 2020 13:40:01 +0300
Subject: [PATCH] Custom CSS Classes when using the simple text version

---
 README.md                  | 3 ++-
 package.json               | 2 +-
 src/Alert/Alert.tsx        | 5 +++--
 src/Alert/Message.tsx      | 6 ++++--
 src/Alert/ToastManager.tsx | 4 +++-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index eb44a17..ad793d4 100644
--- a/README.md
+++ b/README.md
@@ -72,7 +72,8 @@ It also accepts options.
 ```javascript
 toaster.notify("Hello world", {
   position: "bottom-left", // top-left, top, top-right, bottom-left, bottom, bottom-right
-  duration: null // This notification will not automatically close
+  duration: null, // This notification will not automatically close
+  className: "is--danger" // Custom className to be passed to the toast if you're using the string version
 });
 ```
 
diff --git a/package.json b/package.json
index 785b3d6..cb4e8e7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "toasted-notes",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Flexible, easy to implement toast notifications for react",
   "main": "commonjs/index.js",
   "module": "lib/index.js",
diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx
index 9e7c702..bc79eea 100644
--- a/src/Alert/Alert.tsx
+++ b/src/Alert/Alert.tsx
@@ -4,11 +4,12 @@ interface Props {
   id: string;
   title: React.ReactNode | string;
   onClose: () => void;
+  className?: string;
 }
 
-const Alert = ({ id, title, onClose }: Props) => {
+const Alert = ({ id, title, onClose, className = '' }: Props) => {
   return (
-    <div id={id} className="Toaster__alert">
+    <div id={id} className={`Toaster__alert ${className}`}>
       {typeof title === "string" ? (
         <div className="Toaster__alert_text">{title}</div>
       ) : (
diff --git a/src/Alert/Message.tsx b/src/Alert/Message.tsx
index b0b8a20..54dc0f6 100644
--- a/src/Alert/Message.tsx
+++ b/src/Alert/Message.tsx
@@ -43,6 +43,7 @@ export interface MessageOptions {
   onRequestClose: () => void;
   showing: boolean;
   position: PositionsType;
+  className?: string;
 }
 
 interface Props extends MessageOptions {
@@ -58,7 +59,8 @@ export const Message = ({
   position,
   onRequestRemove,
   requestClose = false,
-  duration = 30000
+  duration = 30000,
+  className = '',
 }: Props) => {
   const container = React.useRef<HTMLDivElement | null>(null);
   const [timeout, setTimeout] = React.useState(duration);
@@ -119,7 +121,7 @@ export const Message = ({
 
   function renderMessage() {
     if (typeof message === "string" || React.isValidElement(message)) {
-      return <Alert id={id} title={message} onClose={close} />;
+      return <Alert id={id} title={message} onClose={close} className={className} />;
     }
 
     if (typeof message === "function") {
diff --git a/src/Alert/ToastManager.tsx b/src/Alert/ToastManager.tsx
index 3bd9735..54452d9 100644
--- a/src/Alert/ToastManager.tsx
+++ b/src/Alert/ToastManager.tsx
@@ -15,6 +15,7 @@ export interface MessageOptionalOptions {
   type?: MessageType;
   duration?: number | null;
   position?: PositionsType;
+  className?: string;
 }
 
 interface ToastArgs extends MessageOptions {
@@ -101,7 +102,8 @@ export default class ToastManager extends React.Component<Props, State> {
       duration:
         typeof options.duration === "undefined" ? 5000 : options.duration,
       onRequestRemove: () => this.removeToast(String(id), position),
-      type: options.type
+      type: options.type,
+      className: options.className,
     };
   };