feat: add option to take props for a component as props

playground/src/components/constomCompo.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    {{ contentProps.title }}
+  </div>
+  <button>Click me</button>
+</template>
+<script setup>
+ 
+const props = defineProps({
+  contentProps: {
+    type: Object,
+    default: () => ({ title: String }) 
+    , 
+  }, 
+});
+
+console.log(props);
+</script>
+
+<style>
+button{
+  background-color: orange;
+  padding: 3px;
+  border: 1px solid red
+}
+</style>

playground/src/pages/index.vue

@@ -1,23 +1,26 @@
 <script setup lang="ts">
-import { h, ref } from 'vue';
+import { h, reactive, ref } from 'vue';
 import { Divider } from 'ant-design-vue';
 import { toast, ToastOptions } from 'vue3-toastify';
 import Conditions from '../components/Conditions.vue';
 import ToastCode from '../components/ToastCode.vue';
 import 'ant-design-vue/es/button/style/index.css';
 import 'ant-design-vue/es/divider/style/index.css';
+import constomCompo from '@/components/constomCompo.vue';
 
 const options = ref({} as ToastOptions);
 
 const onOptionsChange = (opts: ToastOptions) => {
   options.value = opts;
 };
 
+
 function showToast() {
-  toast(
-    `Hello!\nWow so easy!&nbsp;<strong>${parseInt(String(Math.random() * 1000), 10)}</strong>`,
-    options.value,
-  );
+  toast(constomCompo, {
+    contentProps: { title: 'narges1' },
+    type: 'info',
+    ...options.value,
+  });
 }
 
 function showLoadToast() {

src/components/ToastItem.tsx

@@ -113,7 +113,43 @@ const ToastItem = defineComponent({
           }
 
           {/* content */}
-          <div data-testid="toast-content">
+          {
+            item.contentProps
+              ? 
+              <div data-testid="toast-content">
+                {h(
+                  toRaw(item.content) as any, { contentProps: item.contentProps },
+                )}
+              </div>
+              : 
+              <div data-testid="toast-content">
+                {
+                  isComponent(item.content as Content)
+                    ?
+                    h(
+                  toRaw(item.content) as any,
+                  {
+                    toastProps: toRaw(item),
+                    closeToast: hideToast,
+                    data: item.data,
+                  },
+                    )
+                    : isFn(item.content)
+                      ? (item.content as Function)({
+                        toastProps: toRaw(item),
+                        closeToast: hideToast,
+                        data: item.data,
+                      })
+                      : 
+                      item.dangerouslyHTMLString
+                        ? h('div', { innerHTML: item.content as string })
+                        : item.content
+
+                }
+              </div>
+          }
+
+          {/* <div data-testid="toast-content">
             {
               isComponent(item.content as Content)
                 ?
@@ -137,7 +173,7 @@ const ToastItem = defineComponent({
                     : item.content
                 
             }
-          </div>
+          </div> */}
         </div>
 
         {/* close button */}

src/components/toastify-container/prop.ts

@@ -179,6 +179,11 @@ const props = {
     required: false,
     default: '',
   },
+  contentProps: {
+    type: Object,
+    required: false,
+    default: null,
+  },
 };
 
 export default props;

src/types.ts

@@ -15,7 +15,8 @@ export type Content =
   | string
   | VNode
   | ((props: ToastContentProps) => VNode)
-  | DefineComponent<{}, {}, any>;
+  | DefineComponent<{}, {}, any>
+  |any;
 
 export type ToastFunc = {(content: Content, options?: ToastOptions): void};
 
@@ -261,6 +262,8 @@ export interface ToastOptions<Data = {}> extends Options {
 
   /** Only available when using `toast.loading' */
   isLoading?: boolean;
+
+  contentProps?: Object;
 }
 
 /**