✨ Update Theme Option Type to Accept String and Improve Custom Theme …

…Documentation

example/src/component/layout/layout.tsx

@@ -112,10 +112,6 @@ const MENU: Menu[] = [
           },
         ],
       },
-      {
-        name: 'Custom Example',
-        hash: '#custom-example',
-      },
     ],
   },
   {

example/src/page/example/example.tsx

@@ -546,97 +546,6 @@ export default function App() {
           </div>
         </div>
       </section>
-
-      <section id="custom-example">
-        <h2>🎨 Custom Example</h2>
-        <p>Want to get creative? Here's how you can customize our package:</p>
-        <br />
-
-        <div className={styles.area}>
-          <h3>render</h3>
-          <div className={styles.default}>
-            default: <code>undefined</code>
-          </div>
-          <p className={styles.description}>
-            The <code>render</code> prop allows you to fully customize the content of the toast. You
-            can return a JSX or a React component to replace the default toast content. However,
-            note that when this prop is used, only the base animation applies and all default styles
-            are discarded.
-          </p>
-          <div className={styles.playground}>
-            <Button
-              onClick={() =>
-                toast('Hello, World! 👋', {
-                  render: (message) => <MyMessage>{message}</MyMessage>,
-                })
-              }
-            >
-              Show Toast
-            </Button>
-          </div>
-          <div className={styles.code}>
-            <CommonHighlighter>{`import toast from 'react-simple-toasts';
-
-export default function App() {
-  const handleClick = () => {
-    toast('Hello, World! 👋', {
-      render: (message) => <MyMessage>{message}</MyMessage>,
-    });
-  };
-
-  return (
-    <button onClick={handleClick}>
-      Show Toast
-    </button>
-  );
-}`}</CommonHighlighter>
-          </div>
-          <p className={styles.description}>
-            The <code>render</code> option is typically used with <code>createToast</code> or{' '}
-            <code>toastConfig</code> for creating more complex and customizable toast notifications.
-          </p>
-          <br />
-          <h4>createToast</h4>
-          <div className={styles.code}>
-            <CommonHighlighter>{`import { createToast } from 'react-simple-toasts';
-
-const myToast = createToast({
-  className: 'my-toast',
-  render: (message) => <MyMessage>{message}</MyMessage>,
-});
-
-export default function App() {
-  return (
-    <button onClick={() => myToast('Hello, World! 👋')}>
-      Show Toast
-    </button>
-  );
-}`}</CommonHighlighter>
-          </div>
-          <br />
-          <h4>toastConfig</h4>
-          <div className={styles.code}>
-            <CommonHighlighter>{`import toast, { toastConfig } from 'react-simple-toasts';
-
-toastConfig({
-  className: 'my-toast',
-  render: (message) => <MyMessage>{message}</MyMessage>,
-});
-
-export default function App() {
-  return (
-    <button onClick={() => toast('Hello, World! 👋')}>
-      Show Toast
-    </button>
-  );
-}`}</CommonHighlighter>
-          </div>
-          <p className={styles.description}>
-            For the differences between <code>createToast</code> and <code>toastConfig</code>,
-            please refer to the <Link to="/api#toast-config">API documentation</Link>.
-          </p>
-        </div>
-      </section>
     </div>
   );
 }

example/src/page/theme/theme.tsx

@@ -178,7 +178,7 @@ export default function App() {
 
         <div className={styles.area}>
           <div className={styles.playground}>
-            <Button onClick={() => toast('Hello, World!', { theme: null, className: 'my-toast' })}>
+            <Button onClick={() => toast('Hello, World!', { theme: 'my-toast' })}>
               Custom toast
             </Button>
           </div>
@@ -198,7 +198,7 @@ import './my-style.css';
 
 export default function App() {
   return (
-    <button onClick={() => toast('Hello, World!', { className: 'my-toast' })}>
+    <button onClick={() => toast('Hello, World!', { theme: 'my-toast' })}>
       Show Toast
     </button>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-toasts",
-  "version": "5.8.1",
+  "version": "5.8.2",
   "description": "Lightweight, user-friendly toast message library for React applications. Add beautiful notifications to your React apps.",
   "author": "almond-bongbong",
   "homepage": "https://github.com/almond-bongbong/react-simple-toasts",

src/component/toast-message.tsx

@@ -149,6 +149,7 @@ function ToastMessage({
     clickable ? styles['clickable'] : '',
     !render && moduleClassNames[`toast-${theme}`],
     !render && theme ? styles['toast-theme-content'] : '',
+    theme || '',
     className,
   );
 

src/type/common.ts

@@ -16,7 +16,7 @@ export interface ToastOptions {
   maxVisibleToasts?: number | null;
   isReversedOrder?: boolean;
   render?: ((message: ReactNode) => ReactNode) | null;
-  theme?: Theme | null;
+  theme?: Theme | string | null;
   zIndex?: number | null;
   loading?: boolean | Promise<unknown>;
   onClick?: ToastClickHandler;