update to v1.3.2

Author: walidcherhane

README.md

@@ -1,37 +1,21 @@
-# ReadMe
-
-![https://user-images.githubusercontent.com/56094829/190699464-8394b80b-6259-4eee-8cb3-5ccf24e9aef8.png](https://user-images.githubusercontent.com/56094829/190699464-8394b80b-6259-4eee-8cb3-5ccf24e9aef8.png)
-
-# Rc-Toastr
-
-> a fully customizable ReactJs toasting library that helps you build complex notification in your app.
-> 
-
-![https://user-images.githubusercontent.com/56094829/190833292-dfaf26be-c88e-482b-9d4e-0919a5810286.gif](https://user-images.githubusercontent.com/56094829/190833292-dfaf26be-c88e-482b-9d4e-0919a5810286.gif)
-
-## Config Options
-
-| Propriety | description | value | default value |
-| --- | --- | --- | --- |
-| autoClose | If the toast should be closed automatically after duration ends | true OR false | true  |
-| showProgressBar | Whether to show the progress bar - autoClose should be true | true OR false | true |
-| pauseOnHover | Whether to pause the closing the toast on hover - autoClose should be true | true OR false | true  |
-| maxToasts | The maximum toasts to show in the screen | number | 30 |
-| duration | The duration in ms before closing the toast | number | 5000 |
-| zIndex | The order of the toasts on the screen | number | 30 |
-| toastBackgroundColor | Function to override the default toast color | (variant) ⇒ string  | (variant) ⇒ theme.colors[type] |
-| renderToastIcon | Function to override the default toast icon | (variant) ⇒ JSX.Element  | (variant) ⇒ theme.icons[type] |
-| postion | The position of the toasts on the screen | top  | bottom | top-right | top-left | bottom-right | bottom-left | top |
-
-## Installation:
-
-```visual-basic
-npm install rc-toastr
-```
-
-```visual-basic
-yarn add rc-toastr
-```
+<div align="center">
+  
+ ![https://user-images.githubusercontent.com/56094829/197514874-b521164e-045e-4390-8db7-eaf13fc35150.png](https://user-images.githubusercontent.com/56094829/197514874-b521164e-045e-4390-8db7-eaf13fc35150.png)
+
+
+<img src="https://img.shields.io/npm/dm/rc-toastr" alt="downloads"/>
+<img src="https://img.shields.io/npm/l/rc-toastr" alt="license"/>
+<img src="https://img.shields.io/npm/v/rc-toastr?color=green" alt="version" />
+  
+</div>
+<br />
+<div align="center">
+<a href="https://dub.sh/rc-toastr">Website</a> 
+<span> · </span>
+<a href="https://dub.sh/rc-docs">Documentation</a> 
+<span> · </span>
+<a href="https://dub.sh/walid">Twitter</a>
+</div>
 
 ## Usage
 
@@ -40,13 +24,7 @@ import { ToastProvider } from 'rc-toastr'
 import "rc-toastr/dist/index.css" // import the css file
 
 ReactDOM.render((
-    <ToastProvider 
-		config={{ // <- Optional
-                position: "top-right"
-                duration: 3000
-                // other config here...
-            }}
-		>
+    <ToastProvider>
         <App />
     </ToastProvider>
 ), document.getElementById('root'))
@@ -57,21 +35,13 @@ import { useToast } from 'rc-toastr'
 
 const App = () => {
     const { toast } = useToast()
-    const sayHello = () => {
-        toast("Hello World!")
-        // toast.success("Hello World!")
-    }
-    return <button onClick={sayHello}> Say Hello </button>
+    const hello = () => toast.success("Hello World!")
+    return <button onClick={toast}> Say Hello </button>
   }
 
 export default App
 ```
 
-## Contributions :
-
-Contributions are always welcome!
-feel free to open a PR or raise an issue if you face any :D
-
-## Live Example
+## Documentation:
 
-**[dub.sh/rc-toaster](https://dub.sh/rc-toaster)**
+For more information and examples feel free to check the official website at: **[dub.sh/rc-toastr](https://dub.sh/rc-toastr)**

example/package.json

@@ -24,7 +24,10 @@
     "typescript": "link:../node_modules/typescript"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+    "autoprefixer": "^10.4.12",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.0"
   },
   "eslintConfig": {
     "extends": "react-app"

www/postcss.config.cjs renamed to example/postcss.config.js

@@ -8,6 +8,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
+    <script src="https://cdn.tailwindcss.com"></script>
 
     <!--
       manifest.json provides metadata used when your web app is added to the

example/public/index.html

@@ -4,16 +4,16 @@ import { Variant } from 'rc-toastr/dist/types'
 const App = () => {
   const { updateConfig, config } = useToast()
   return <div>
-    <div className="container">
+    <div className="container mx-auto">
       <img src="/logo.png" alt="" width={100} />
       <h1 className="title">
         rc-toastr
       </h1>
       <p className="description">
         <span role="img" aria-label='light'>💡</span> Tip:  Click the toast to show the others!
       </p>
-      <div className="flex gap-md">
-        <label className="flex gap-xs">
+      <div className="flex gap-4">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input checked={config.autoClose} type="checkbox" onChange={(e) => {
               updateConfig({
@@ -25,7 +25,7 @@ const App = () => {
           </label>
           <span>Auto Close</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="checkbox" checked={config.showProgressBar} disabled={!config.autoClose} onChange={(e) => {
               updateConfig({
@@ -37,7 +37,7 @@ const App = () => {
           </label>
           <span>Show Porgress Bar</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="checkbox" checked={config.pauseOnHover} disabled={!config.autoClose} onChange={(e) => {
               updateConfig({
@@ -50,8 +50,8 @@ const App = () => {
           <span>Pause On Hover</span>
         </label>
       </div>
-      <div className="flex gap-md">
-        <label className="flex gap-xs">
+      <div className="flex gap-4">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "top"} name='postion' onChange={() => {
               updateConfig({
@@ -63,7 +63,7 @@ const App = () => {
           </label>
           <span>Top</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "top-left"} name='postion' onChange={() => {
               updateConfig({
@@ -75,7 +75,7 @@ const App = () => {
           </label>
           <span>Top Left</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "top-right"} name='postion' onChange={() => {
               updateConfig({
@@ -87,7 +87,7 @@ const App = () => {
           </label>
           <span>Top Right</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "bottom"} name='postion' onChange={() => {
               updateConfig({
@@ -99,7 +99,7 @@ const App = () => {
           </label>
           <span>Bottom</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "bottom-left"} name='postion' onChange={() => {
               updateConfig({
@@ -111,7 +111,7 @@ const App = () => {
           </label>
           <span>Bottom Left</span>
         </label>
-        <label className="flex gap-xs">
+        <label className="flex gap-2">
           <label className="checkbox">
             <input type="radio" checked={config.position === "bottom-right"} name='postion' onChange={() => {
               updateConfig({
@@ -165,7 +165,20 @@ const Button: React.FC<{
   const { toast } = useToast()
 
   const handleToast = () => {
-    toast[variant]?.(`Here is your ${variant} toast`)
+    toast.loading(
+      new Promise((_, reject) => {
+        setTimeout(() => {
+          reject("Done")
+        }, 3000)
+      }),
+      {
+        success: "Success, it's done!",
+        error: (e)=>{
+          toast.error(e as string)
+        },
+        loading: `Loading data...`,
+      }  
+    )
   }
   return (
     <button className="button" onClick={handleToast}>

example/src/App.tsx

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   padding: 0;
@@ -6,6 +10,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(to right, #c9d6ff, #e2e2e2);
+
 }
 
 
@@ -14,31 +20,6 @@ code {
     monospace;
 }
 
-.flex {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.flex-column {
-  flex-direction: column;
-}
-.gap-xs {
-  gap: 0.5rem;
-}
-.gap-sm {
-  gap: 1rem;
-}
-.gap-md {
-  gap: 1.5rem;
-}
-.gap-lg {
-  gap: 2rem;
-}
-.gap-xl {
-  gap: 2.5rem;
-}
-
 .container {
   overflow-x: auto;
   min-height: 100vh;
@@ -50,7 +31,6 @@ code {
   gap: 1rem;
   flex-wrap: wrap;
   padding: 1rem 0;
-  background: linear-gradient(to right, #c9d6ff, #e2e2e2);
 }
 
 .title {

example/src/index.css

@@ -2,13 +2,17 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import App from './App'
-import { ToastProvider } from 'rc-toastr'
+import {ToastProvider } from 'rc-toastr'
 import "rc-toastr/dist/index.css"
 import './index.css'
 
 ReactDOM.render((
-        <ToastProvider>
-            <App />
-        </ToastProvider>
+    <ToastProvider
+      config={{
+        autoClose: false
+      }}
+    >
+        <App />
+    </ToastProvider>
 
 ), document.getElementById('root'))

example/src/index.tsx

@@ -0,0 +1,9 @@
+module.exports = {
+  "content": [
+    "./src/**/*.{js,jsx,ts,tsx}"
+  ],
+  "theme": {
+    "extend": {}
+  },
+  "plugins": []
+}