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 (
-
+
{typeof title === "string" ? (
{title}
) : (
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
(null);
const [timeout, setTimeout] = React.useState(duration);
@@ -119,7 +121,7 @@ export const Message = ({
function renderMessage() {
if (typeof message === "string" || React.isValidElement(message)) {
- return ;
+ return ;
}
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 {
duration:
typeof options.duration === "undefined" ? 5000 : options.duration,
onRequestRemove: () => this.removeToast(String(id), position),
- type: options.type
+ type: options.type,
+ className: options.className,
};
};