feat: upgrade react and dependent package and changed the type names

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tiny-toast",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "private": false,
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -14,20 +14,20 @@
   },
   "types": "lib/types/react-tiny-toast.d.ts",
   "dependencies": {
-    "react": ">=16.8.0 <17.0",
-    "react-dom": ">=16.8.0 <17.0"
+    "react": ">=17.0.0 <18.0",
+    "react-dom": ">=17.0.0 <18.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.7.5",
+    "@babel/cli": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.10.4",
-    "@types/react": "^16.9.41",
-    "@types/react-dom": "^16.9.8",
-    "typescript": "^3.9.6"
+    "@babel/preset-typescript": "^7.22.15",
+    "@types/react": "^17.0.39",
+    "@types/react-dom": "^17.0.11",
+    "typescript": "^4.6.4"
   },
   "peerDependencies": {
-    "react": ">=16.8.0 <17.0",
-    "react-dom": ">=16.8.0 <17.0"
+    "react": ">=17.0.0 <18.0",
+    "react-dom": ">=17.0.0 <18.0"
   },
   "scripts": {
     "start": "tsc -w",

src/ToastContainer.tsx

@@ -2,23 +2,23 @@ import React, { useEffect, useReducer, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { toastManager } from './toast';
 import './index.css';
-import { actionTypes, optionTypes, contentTypes } from './types/react-tiny-toast';
+import { Action, Options, Content } from './types/react-tiny-toast';
 
 const ADD = 'ADD';
 const REMOVE = 'REMOVE';
-interface stateTypes extends optionTypes {
-  content?: contentTypes;
+interface TState extends Options {
+  content?: Content;
 }
 
-interface MapperValuesInterface extends optionTypes{
-  content: contentTypes
+interface MapperValuesInterface extends Options{
+  content: Content
 }
 interface ActionsInterface {
-  type: actionTypes;
-  data: stateTypes;
+  type: Action;
+  data: TState;
 }
 
-const reducer = (state: stateTypes[], action: ActionsInterface) => {
+const reducer = (state: TState[], action: ActionsInterface) => {
   const { type, data } = action;
   if(type === ADD) {
     if(state.filter(i => i.uniqueCode && i.uniqueCode === data.uniqueCode).length) {
@@ -36,7 +36,7 @@ const ToastContainer = () => {
   const [data, dispatch] = useReducer(reducer, [])
   const toastRef = useRef<HTMLDivElement | null>(null)
 
-  const callback = (actionType: actionTypes, content: contentTypes, options: optionTypes) => {
+  const callback = (actionType: Action, content: Content, options: Options) => {
     if(actionType === ADD) {
       dispatch({ type: ADD, data: { content, ...options, key: `${options.id}` }})
     }
@@ -63,7 +63,7 @@ const ToastContainer = () => {
 
   const positionMaintainer = (): any => {
     const mapper: any = {}
-    data.map(({ position, ...rest }: optionTypes) => {
+    data.map(({ position, ...rest }: Options) => {
       if(position) {
         if(!mapper[position]) mapper[position] = []
         mapper[position].push(rest)

src/toast.ts

@@ -1,38 +1,42 @@
-import { contentTypes, callbackFuncTypes, ToastOptionsInterface } from './types/react-tiny-toast';
+import {
+  Content,
+  callbackFuncTypes,
+  ToastOptionsInterface,
+} from "./types/react-tiny-toast";
 
 const defaultOptions: ToastOptionsInterface = {
   delay: 0,
   timeout: 2000,
-  position: "top-center"
-}
-export const toastManager = (function() {
+  position: "top-center",
+};
+export const toastManager = (function () {
   let callbackFn: callbackFuncTypes;
   const manager = {
     subscribe(callback: callbackFuncTypes): void {
       callbackFn = callback;
     },
-    add(content: contentTypes, options: ToastOptionsInterface) {
+    add(content: Content, options: ToastOptionsInterface) {
       const mergedOptions = { ...defaultOptions, ...options };
       const timeoutId = window.setTimeout(() => {
-        callbackFn('ADD', content, {...mergedOptions, id: timeoutId});
+        callbackFn("ADD", content, { ...mergedOptions, id: timeoutId });
       }, mergedOptions.delay);
       return timeoutId;
     },
     remove(id: number) {
-      callbackFn('REMOVE', null, { id })
+      callbackFn("REMOVE", null, { id });
       return true;
-    }
-  }
+    },
+  };
   return manager;
 })();
 
 const toast = {
-  show: (content: contentTypes, options: ToastOptionsInterface) => {
-    return toastManager.add(content, options)
+  show: (content: Content, options: ToastOptionsInterface) => {
+    return toastManager.add(content, options);
   },
   remove: (id: number) => {
-    return toastManager.remove(id)
-  }
-}
+    return toastManager.remove(id);
+  },
+};
 
-export default toast;
+export default toast;

src/types/react-tiny-toast.ts

@@ -1,32 +1,31 @@
-
 import { ReactChild, ReactNode } from "react";
 import { POSITIONS, VARIANTS, ACTIONS } from "..";
-import toast from '../toast';
-import ToastContainer from '../ToastContainer';
+import toast from "../toast";
+import ToastContainer from "../ToastContainer";
 
-export type variantTypes = typeof VARIANTS[keyof typeof VARIANTS];
-export type positionTypes = typeof POSITIONS[keyof typeof POSITIONS];
-export type actionTypes = typeof ACTIONS[keyof typeof ACTIONS];
-export type contentTypes = ReactChild | ReactNode | null;
+export type Variant = (typeof VARIANTS)[keyof typeof VARIANTS];
+export type Position = (typeof POSITIONS)[keyof typeof POSITIONS];
+export type Action = (typeof ACTIONS)[keyof typeof ACTIONS];
+export type Content = ReactChild | ReactNode | null;
 export interface ToastOptionsInterface {
   delay?: number;
   timeout?: number;
-  position?: positionTypes;
+  position?: Position;
   pause?: boolean;
   className?: string;
-  variant?: variantTypes;
+  variant?: Variant;
   uniqueCode?: string | number;
 }
 
-export interface optionTypes extends ToastOptionsInterface {
+export interface Options extends ToastOptionsInterface {
   id: number;
   key?: string;
 }
 
 export type callbackFuncTypes = (
-  type: actionTypes,
-  content: contentTypes,
-  options: optionTypes
-) => void
+  type: Action,
+  content: Content,
+  options: Options
+) => void;
 
-export { VARIANTS, POSITIONS, ACTIONS, toast, ToastContainer };
+export { VARIANTS, POSITIONS, ACTIONS, toast, ToastContainer };