@tryferos/popups - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

dist/index.d.ts

@@ -11,2 +11,3 @@ import React, { ReactNode, ComponentProps } from 'react';
 type PopupType = (ComponentProps<typeof PopupElement>['popups']) extends Array<infer Item> ? Item : never;
+type ToastType = (ComponentProps<typeof PopupToastElement>['toasts']) extends Array<infer Item> ? Item : never;
 type handlePopupProps = {
@@ -17,2 +18,7 @@ popup: PopupType | null;
 };
+type handleToastProps = {
+    toast: ToastType | null;
+    title?: string | undefined;
+    data?: unknown | undefined;
+};
 declare function PopupWrapper(props: {
@@ -28,2 +34,9 @@ children: ReactNode;
 };
+declare const useToast: () => {
+    toast: ToastType | null;
+    changeToast: ({ toast, title, data }: handleToastProps) => void;
+    closeToast: () => void;
+    title: string;
+    data: unknown;
+};
 
@@ -34,3 +47,7 @@ type PopupItemProps = {
 };
+type ToastItemProps = Pick<PopupItemProps, 'element'> & {
+    toast: ToastType;
+};
 declare function PopupItem(props: PopupItemProps): React.JSX.Element | null;
+declare function ToastItem(props: ToastItemProps): React.JSX.Element | null;
 
@@ -60,2 +77,2 @@ type Animations = {
 
-export { PopupElement, type PopupElementProps, PopupItem, PopupToastElement, PopupWrapper, type ToastElementProps, usePopup };
+export { PopupElement, type PopupElementProps, PopupItem, PopupToastElement, PopupWrapper, type ToastElementProps, ToastItem, usePopup, useToast };

package.json

 {
   "name": "@tryferos/popups",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Provides you with popup components to use in your React app.",
@@ -11,2 +11,3 @@ "main": "dist/index.cjs",
     "popup",
+    "toast",
     "modal"
@@ -13,0 +14,0 @@ ],

README.md

@@ -1,2 +0,2 @@
-# Search Popup Component
+# Popup & Toast Handler and Layout Component
 
@@ -11,2 +11,5 @@ [Install the package for npm here.](https://www.npmjs.com/package/@tryferos/popups)
 
+**VERSION 1.1** 
+You can create your own Toasts and add them to the toasts list.
+
 The project is build using **React, Typescript and Tailwindcss**. Tailwindcss is compiled into css, meaning you do not need it as a depedency.
@@ -22,2 +25,3 @@
 -   :white_check_mark: Create as many Popups.
+-   :white_check_mark: Create as many Toasts.
 -   :white_check_mark: Light/dark Mode.
@@ -50,3 +54,6 @@ -   :white_check_mark: Animations.
 ```javascript
-import { PopupItem, PopupWrapper, usePopup } from "@tryferos/Popups";
+{/*! Version 1.0*/}
+import { PopupItem, PopupWrapper, PopupElement, usePopup } from "@tryferos/Popups";
+{/*! Version 1.1*/}
+import {ToastItem, PopupToastElement, useToast} from "@tryferos/Popups"
 ```
@@ -59,5 +66,14 @@
 ```javascript
+{/*! Version 1.0*/}
 const { popup, changePopup, title, closePopup} = usePopup();
-
+{/*! Version 1.1*/}
+const { toast, changeToast, title, closeToast} = useToast();
 <PopupWrapper>
+    {/*! Version 1.1*/}
+    <PopupToastElement position={'top-center'} toasts={Object.values(myToastsEnum)}>
+        <ToastItem toast={myToastsEnum.Error} element={<MyErrorToastComponent/>} />
+        <ToastItem toast={myToastsEnum.Success} element={<MySuccessToastComponent/>} />
+        ...
+    </PopupToastElement>
+    {/*! Version 1.0*/}
     <PopupElement popups={Object.values(MyPopupsEnum)}>
@@ -64,0 +80,0 @@ <PopupItem popup={MyPopupsEnum.Login} element={<MyLoginPopupComponent/>}/>

No alert changes

Improved metrics

Total package byte prevSize

262133

increased by0.68%

Lines of code

1024

increased by1.89%

Number of lines in readme file

89

increased by21.92%

No dependency changes