rename 'single' to 'onlyLast' param, bugfix with autoClose = 0

README.md

@@ -141,7 +141,7 @@ notifier.configure({
   position: "top-center",
   delay: 500,
   single: false,
-  containerWidth: "480px"
+  width: "480px"
 });
 
 const App = () => (

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-react-notifications",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Tiny react.js notification library (1kb gzip).",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/NotificationContainer/NotificationContainer.tsx

@@ -5,8 +5,13 @@ import "./styles.css";
 const filter = (ar: JSX.Element[], id: number) =>
   ar.filter((it: JSX.Element) => it.key != id);
 
-const Notification = ({ message, onClose, type = "info" }: any) => (
-  <div className={`item ${type}`}>
+const Notification = ({
+  message,
+  onClose,
+  type = "info",
+  width = "300px"
+}: any) => (
+  <div className={`item ${type}`} style={{ width }}>
     <span>{message}</span>
     <button onClick={onClose}>✖</button>
   </div>
@@ -48,11 +53,15 @@ export default (props: Config & { id: number; cleared: () => void }) => {
       );
     }
 
-    items.current = [newItem, ...(props.single ? [] : items.current)];
+    items.current = [newItem, ...(props.onlyLast ? [] : items.current)];
     eventManager.add(id, () => removeItemById(id));
 
     setTimeout(() => setItems(items.current), delay);
-    setTimeout(() => removeItemById(id), delay + autoClose + animationDuration);
+    autoClose &&
+      setTimeout(
+        () => removeItemById(id),
+        delay + autoClose + animationDuration
+      );
   }, [props]);
 
   return <>{...items.current}</>;

src/NotificationContainer/styles.css

@@ -47,7 +47,7 @@
   color: black;
   min-height: 48px;
   margin-bottom: 16px;
-  padding: 8px;
+  padding: 12px 8px;
   border-radius: 1px;
   box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
   display: flex;

src/index.tsx

@@ -18,8 +18,8 @@ export type Config = {
   autoClose?: number;
   delay?: number;
   render?: any;
-  single?: boolean;
-  containerWidth?: string;
+  onlyLast?: boolean;
+  width?: string;
   animation?: Animation;
 };
 
@@ -51,12 +51,11 @@ let globalCfg: Config;
 
 const notifier = (cfg?: Config) => {
   cfg = { ...(globalCfg || {}), ...cfg };
-  const { position = "top-right", containerWidth = "320px" } = cfg;
+  const { position = "top-right" } = cfg;
   let modalRoot = document.querySelector("." + cls + "." + position);
   if (!modalRoot) {
     modalRoot = document.createElement("div");
     modalRoot.classList.add(cls, position);
-    (modalRoot as HTMLElement).style.width = containerWidth;
     document.body.appendChild(modalRoot);
   }