Custom CSS Classes when using the simple text version

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
 });
 ```
 

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",

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>
       ) : (

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") {

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,
     };
   };