+## Documentation
+
+Explore the full capabilities of React Simple Toasts and try out live examples in our [documentation page](https://almond-bongbong.github.io/react-simple-toasts/).
+
+## Key Features
+
+- **Ease of use**: With a simple installation process and an intuitive API, you can get started with the library in no time.
+- **Highly customizable**: You can control various aspects of your toast messages, from their appearance and duration to their behavior upon user interaction.
+- **Custom rendering**: The library supports custom rendering, allowing you to tailor the look of your toast messages to match your application's branding.
+- **Positioning**: The library allows you to position your toasts at any corner or center of the viewport, offering a high level of control over where your messages appear.
+- **Browser compatibility**: The library includes utility functions to ensure that it works seamlessly across different browsers.
+- **Interactive**: The library allows toasts to be clickable and to close on click if desired, enabling user interaction.
+- **Multiple toasts management**: It provides functionality to manage multiple toasts by controlling the maximum number of visible toasts at a time.
+
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
-- [Live Demo](#live-demo)
- [API](#api)
- [toast(message, options)](#toastmessage-options)
- [Toast Return Object](#toast-return-object)
- - [createToast(options)](#createtoastoptions)
- - [toastConfig(options)](#toastconfigoptions)
+ - [Configuring Toasts: createToast and toastConfig](#configuring-toasts-createtoast-and-toastconfig)
- [Contributing](#contributing)
+- [Support Us](#support-us)
- [License](#license)
## Installation
-To install the package via npm, run:
+Install the package via npm:
```sh
npm install react-simple-toasts
@@ -34,7 +47,7 @@ npm install react-simple-toasts
## Usage
-To utilize React Simple Toasts, invoke the toast function with a message to display:
+Import and call the toast function with a message to display:
```jsx
import toast from 'react-simple-toasts';
@@ -44,188 +57,27 @@ function MyComponent() {
}
```
-By default, the toast message is displayed for 3 seconds. Modify the duration by providing a second argument to the `toast` function:
-
-```jsx
-toast('Hello, world!', 5000);
-```
-
-Adjust the appearance and behavior of the toast message by supplying an options object to the toast function:
-
-```jsx
-toast('Hello, world!', {
- duration: 5000,
- position: 'top-right',
- clickable: true,
- clickClosable: true,
- className: 'custom-toast',
- render: (message) =>
-
- );
-}
-
-export default App;
diff --git a/example/src/app.tsx b/example/src/app.tsx
new file mode 100644
index 0000000..3636d7d
--- /dev/null
+++ b/example/src/app.tsx
@@ -0,0 +1,37 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import GettingStarted from './page/getting-started';
+import Root from './root';
+import Home from './page/home';
+import Example from './page/example';
+import Api from './page/api';
+
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element:
-
-
-
- react-simple-toasts
-- React Simple Toasts is a lightweight and versatile toast notification - library for React applications. -
- -
- {`import toast from 'react-simple-toasts'
-
-// ...
-
-toast('Simple message')`}
-
-
- Basic Usage
-- Display a straightforward toast notification with default settings. -
-
-
-
-
- {`toast(Custom JSX message)`}
-
-
- Utilizing JSX in Toast Notifications
-- Leverage JSX to design more intricate and customizable toast - notifications. This example showcases how to include JSX elements - and apply inline styles within the message. -
-
-
-
-
-
- {`toast('This message is displayed for 1 second.', 1000)`}
-
-
-
- Toast Notification Duration
-- Determine the duration for which the toast notification remains - visible. This example demonstrates how to display a toast - notification for a specific duration. -
-
-
-
-
-
- {`import toast, { clearToasts } from 'react-simple-toasts'
-
-// ...
-
-toast('Simple message')
-clearToasts()`}
-
-
-
- Toast Clearing
-- Clear all toast notifications. This example demonstrates how to - clear all toast notifications. -
-
-
-
-
-
-
- {`toast('This message is displayed for 1 second.', {
- duration: 1000,
-})`}
-
-
-
- Toast Notification Duration (Alternative Syntax)
-- As an alternative, you can use the "duration" option to specify the - display duration. -
-
-
-
-
-
- {`toast('Top-left positioned toast', { position: 'top-left' })
-toast('Top-center positioned toast', { position: 'top-center' })
-toast('Top-right positioned toast', { position: 'top-right' })
-toast('Bottom-left positioned toast', { position: 'bottom-left' })
-toast('Bottom-center positioned toast', { position: 'bottom-center' })
-toast('Bottom-right positioned toast', { position: 'bottom-right' })
-toast('Center positioned toast', { position: 'center' })`}
-
-
-
- Positioning Toast Notifications
-- Select the desired position of the toast notification on the screen. - This example demonstrates how to display toast notifications in - various positions. -
- -
-
-
-
-
-
- - - - -
- -
- - - - -
-
- {`toast('Click to close this toast', { clickClosable: true })`}
-
-
-
- Click-to-Close Toast
-- Create a toast notification that can be dismissed by clicking on it. - This example demonstrates a toast with the "clickClosable" option - set to true. -
-
-
-
-
-
- {`toast('Red Message', { render: message =>
-
-
- Customize Toast Appearance
-- Modify the appearance of the toast notification using the "render" - option. In this example, the toast notification will display red - text. -
-
-
-
- {message}
})`}
-
-
- {`// index.js
-import toast, { toastConfig } from 'react-simple-toasts'
-
-toastConfig({
- duration: 4000,
- className: 'my-toast',
- position: 'top-center',
- clickClosable: true,
- render: message =>
-
-
- Global Configuration
-- Establish global configurations to apply default settings to all - toast notifications in your application. -
-{message}
,
-})
-
-// ...
-
-toast('Red Message')`}
-
-
- {`toastConfig({ maxVisibleToasts: 3 });
-
-// ...
-
-toast('Toast message');`}
-
-
-
- Max Visible Toasts
-- Limit the number of toast notifications displayed at the same time. -
-
-
-
-
-
- {``}
-
-
-
- Apply maxVisibleToasts directly in the toast function.
-
-
-
-
-
- {`const myToast = toast('Message', Infinity); // Show toast
-
-myToast.close(); // Close toast`}
-
-
-
- Control Infinite Toast
-- In this example, we use the Toast object to display and close a - toast with an infinite duration. -
- -
-
-
-
-
-
- {`const myToast = toast('Message', 3000); // Show toast for 3 seconds
-
-myToast.updateDuration(5000); // Update toast duration to 5 seconds`}
-
-
-
- Update Toast Duration
-- In this example, we use the Toast object's 'updateDuration' method - to update the duration of a toast message. -
- -
-
-
-
-
-
- {`const myToast = toast('Original Message', 3000); // Show toast for 3 seconds
-
-myToast.update('Updated Message', 5000); // Update toast message and duration`}
-
-
- Update Toast Message and Duration
-- In this example, we use the Toast object's 'update' method to update - the message and duration of a toast message. -
- -
-
-
-
- {children}
;
+}
+
+export default MyMessage;
diff --git a/example/src/component/layout/index.ts b/example/src/component/layout/index.ts
new file mode 100644
index 0000000..3e22dcc
--- /dev/null
+++ b/example/src/component/layout/index.ts
@@ -0,0 +1 @@
+export { default } from './layout';
diff --git a/example/src/component/layout/layout.module.css b/example/src/component/layout/layout.module.css
new file mode 100644
index 0000000..afe1393
--- /dev/null
+++ b/example/src/component/layout/layout.module.css
@@ -0,0 +1,110 @@
+:root {
+ --header-height: 66px;
+}
+
+.header {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 100;
+ padding: 8px 30px 10px;
+ background-color: rgba(255, 255, 255, 0.9);
+ box-shadow: 0 1px 1px 0 rgba(100, 100, 100, 0.2);
+}
+
+.header h1 span {
+ margin-left: 15px;
+ vertical-align: middle;
+ font-size: 28px;
+ line-height: 32px;
+}
+
+.header h1 img {
+ display: inline-block;
+ height: 30px;
+ vertical-align: middle;
+}
+
+.header .meta img {
+ display: block;
+ height: 24px;
+}
+
+.navigation {
+ position: fixed;
+ top: var(--header-height);
+ bottom: 0;
+ left: 0;
+ width: 280px;
+ padding: 20px;
+ background-color: #faf8f1;
+}
+
+.navigation a {
+ display: block;
+ z-index: 10;
+ padding: 10px;
+}
+
+.navigation a:hover {
+ background-color: #f1f1f1;
+}
+
+.navigation :global(.active) {
+ color: #000;
+}
+
+.navigation :global(.active):before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: -1;
+ background-color: #f1f1f1;
+}
+
+.navigation li {
+ position: relative;
+}
+
+.navigation li li {
+ padding-left: 20px;
+ color: #666;
+}
+
+.navigation li li :global(.active) {
+ color: #000;
+ background-color: transparent;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ margin-left: 280px;
+ padding-top: var(--header-height);
+}
+
+.content {
+ padding: 30px 60px 100px;
+}
+
+.content section {
+ scroll-margin-top: var(--header-height);
+}
+
+.footer {
+ margin-top: auto;
+ padding: 30px 0;
+ border-top: 1px solid #eee;
+ color: #aaa;
+ font-size: 14px;
+ text-align: center;
+}
diff --git a/example/src/component/layout/layout.tsx b/example/src/component/layout/layout.tsx
new file mode 100644
index 0000000..9a6f431
--- /dev/null
+++ b/example/src/component/layout/layout.tsx
@@ -0,0 +1,176 @@
+import React, { ReactNode, useEffect, useRef } from 'react';
+import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
+import styles from './layout.module.css';
+import logo from '../../assets/images/common/logo.png';
+import githubIcon from '../../assets/images/common/github-icon.png';
+import { AtLeast } from '../../type/utils';
+import { debounce } from '../../util/debounce';
+
+interface Props {
+ children: ReactNode;
+}
+
+interface Menu {
+ name: string;
+ path: string;
+ hash?: string;
+ children?: AtLeast
+
+ 
+ React Simple Toasts
+
+
+
+
+ 
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Configuring Toasts:
+
+ +
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+ );
+}
+
+export default Api;
diff --git a/example/src/page/api/index.ts b/example/src/page/api/index.ts
new file mode 100644
index 0000000..e126924
--- /dev/null
+++ b/example/src/page/api/index.ts
@@ -0,0 +1 @@
+export { default } from './api';
diff --git a/example/src/page/example/example.module.css b/example/src/page/example/example.module.css
new file mode 100644
index 0000000..181f840
--- /dev/null
+++ b/example/src/page/example/example.module.css
@@ -0,0 +1,15 @@
+.code {
+ margin-top: 20px;
+}
+
+.area + .area {
+ margin-top: 40px;
+}
+
+.description {
+ margin-top: 20px;
+}
+
+.playground {
+ margin-top: 20px;
+}
diff --git a/example/src/page/example/example.tsx b/example/src/page/example/example.tsx
new file mode 100644
index 0000000..182d7c5
--- /dev/null
+++ b/example/src/page/example/example.tsx
@@ -0,0 +1,535 @@
+import React, { useState } from 'react';
+import toast, { createToast, Toast, ToastPosition } from 'react-simple-toasts';
+import styles from './example.module.css';
+import CommonHighlighter from '../../component/common-highlighter';
+import Button from '../../component/button';
+import MyMessage from '../../component/example/my-message';
+import { Link } from 'react-router-dom';
+
+const toastA = createToast({
+ duration: 3000,
+});
+
+function Example() {
+ const [position, setPosition] = useState๐ Toast
+ +toast(message, durationOrOptions): Toast
++ Displays a toast notification with the given message and options. It + returns a Toast object that allows you to control the toast message + currently being displayed. +
+
+ {`import toast from 'react-simple-toasts';
+
+export function MyComponent() {
+ return (
+
+ );
+}`}
+
+ +
+ By default, the toast message is displayed for 3 seconds. Modify the + duration by providing a second argument to the `toast` function: +
+
+ {`toast('Hello, world!', 5000);`}
+
+ +
+ By default, the toast message is displayed for 3 seconds. Modify the + duration by providing a second argument to the `toast` function: +
+
+ {`toast('Hello, world!', {
+ duration: 5000,
+ position: 'top-right',
+ clickable: true,
+ clickClosable: true,
+ className: 'custom-toast',
+ render: (message) =>
+
+ + +
Main Parameters
+| Parameter | +Type | +Description | +
|---|---|---|
| message | +
+ string, ReactNode
+ |
+ The message to display in the toast. | +
| durationOrOptions | +
+ number, object
+ |
+ + Either the duration for the toast (in milliseconds) or an object + containing options for the toast. + | +
+
Options Object Properties
+| Property | +Type | +Description | +
|---|---|---|
| duration | +
+ number
+ |
+
+ The duration (in milliseconds) for which the toast message will
+ be displayed. Default is 3000.
+ |
+
| className | +
+ string
+ |
+ A string of classes to apply to the toast container. | +
| clickable | +
+ boolean
+ |
+
+ A boolean value that determines whether the toast message is
+ clickable. Default is false.
+ |
+
| clickClosable | +
+ boolean
+ |
+
+ A boolean value that determines whether the toast message can be
+ closed by clicking on it. Default is false.
+ |
+
| position | +
+ string
+ |
+
+ A string that sets the position of the toast message. Available
+ options are 'bottom-left',{' '}
+ 'bottom-center', 'bottom-right',{' '}
+ 'top-left', 'top-center',{' '}
+ 'top-right', and 'center'. Default is{' '}
+ 'bottom-center'.
+ |
+
| maxVisibleToasts | +
+ number
+ |
+
+ The maximum number of toast messages that can be displayed
+ simultaneously. Default is null, which allows an
+ unlimited number of toasts.
+ |
+
| render | +
+ function
+ |
+
+ A function that returns a ReactNode to render as the toast
+ message. The function takes a message argument,
+ which is the message to display in the toast. Default is{' '}
+ null.
+ |
+
| onClick | +
+ function
+ |
+
+ A function to be called when the toast message is clicked. This
+ function takes an event argument, which is the
+ click event. Must be used with clickable: true.
+ |
+
| onClose | +
+ function
+ |
+ + A function to be called when the toast message is closed and the + closing animation is finished. + | +
| onCloseStart | +
+ function
+ |
+ + A function to be called when the toast message starts closing, + right before the closing animation begins. + | +
+
Toast Return Object
+
+ When you call the toast function, it returns a{' '}
+ Toast object that you can use to control the displayed
+ toast message. The Toast object includes the following
+ methods:
+
| Method | +Description | +Version | +
|---|---|---|
+ close()
+ |
+ Closes the currently displayed toast message. | +3.3.0 | +
+ updateDuration(newDuration: number)
+ |
+ + Updates the duration of the currently displayed toast message. + | +3.5.0 | +
+ update(message: ReactNode, duration?: number)
+ |
+ + Updates the message and duration of the currently displayed + toast message. + | +3.5.0 | +
+ These methods can be invoked at any time to manage the toast message + before its duration has elapsed. +
+
+ {`const myToast = toast('Hello, world!', Infinity);
+
+// ...
+
+`}
+
+ ๐ ๏ธ Toast Config
+
+ Configuring Toasts: createToast and{' '}
+ toastConfig
+
+
+ The createToast and toastConfig functions
+ provide methods for configuring and managing toast messages in your
+ application. Both functions can be used to fine-tune the behavior of
+ your toast messages, each serving a different purpose.
+
+ +
| Parameter | +Type | +Description | +
|---|---|---|
| duration | +
+ number
+ |
+
+ The duration (in milliseconds) for which the toast message will
+ be displayed. Default is 3000.
+ |
+
| className | +
+ string
+ |
+ A string of classes to apply to the toast container. | +
| clickClosable | +
+ boolean
+ |
+
+ A boolean value that determines whether the toast message can be
+ closed by clicking on it. Default is false.
+ |
+
| position | +
+ string
+ |
+
+ A string that sets the position of the toast message. Available
+ options are 'bottom-left',{' '}
+ 'bottom-center', 'bottom-right',{' '}
+ 'top-left', 'top-center',{' '}
+ 'top-right', and 'center'. Default is{' '}
+ 'bottom-center'.
+ |
+
| maxVisibleToasts | +
+ number
+ |
+
+ The maximum number of toast messages that can be displayed
+ simultaneously. Default is null, which allows an
+ unlimited number of toasts.
+ |
+
| render | +
+ function
+ |
+
+ A function that returns a ReactNode to render as the toast
+ message. The function takes a message argument,
+ which is the message to display in the toast. Default is{' '}
+ null.
+ |
+
+ +
createToast(options)
+
+ Introduced in version 3.6.0, the createToast function
+ generates a new toast function instance based on the given options.
+ This allows you to create and manage multiple pre-configured toast
+ instances with different configurations.
+
+
+ {`import { createToast } from 'react-simple-toasts';
+
+const customToast = createToast({
+ duration: 5000,
+ className: 'custom-toast',
+ clickClosable: true,
+ position: 'bottom-right',
+ maxVisibleToasts: 3,
+ render: (message) => {message},
+});
+
+function MyComponent() {
+ return (
+
+ );
+}`}
+
+
+ + +
toastConfig(options)
+
+ The toastConfig function sets default options for all
+ toast messages in your application.
+
+
+ {`// index.js
+import { toastConfig } from 'react-simple-toasts';
+
+toastConfig({
+ duration: 5000,
+ className: 'custom-toast',
+ clickClosable: true,
+ position: 'bottom-right',
+ maxVisibleToasts: 3,
+ render: (message) => {message},
+});`}
+
+
+ + +
createToast vs toastConfig
+
+ While both createToast and toastConfig serve
+ similar purposes, they differ in their usage. toastConfig{' '}
+ specifies default settings that apply to all toast messages throughout
+ your application. In contrast, createToast is used to
+ create distinct toast instances with various configurations.
+
+ If you need to create toasts with special settings for specific
+ sections only, it's recommended to use createToast.
+ However, if you want to maintain consistency across your application,
+ it's advisable to specify default settings using{' '}
+ toastConfig.
+
๐งน Clearing Toasts
+clearToasts()
+
+ The clearToasts function is used to dismiss all currently
+ displayed toast notifications. This can be especially useful in
+ situations where you want to ensure that all toasts are removed from
+ the screen, such as navigating away from a page or reacting to
+ specific user actions.
+
+
+ Here is an example of how to use the clearToasts{' '}
+ function:
+
+ {`import { clearToasts } from 'react-simple-toasts';
+
+// ... your other code
+
+// This will dismiss all current toast notifications
+clearToasts();`}
+
+ +
+ Note that the clearToasts function does not take any
+ arguments and does not return a value. It simply removes all toasts
+ from the screen.
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ );
+}
+
+export default Example;
diff --git a/example/src/page/example/index.ts b/example/src/page/example/index.ts
new file mode 100644
index 0000000..f46b838
--- /dev/null
+++ b/example/src/page/example/index.ts
@@ -0,0 +1 @@
+export { default } from './example';
diff --git a/example/src/page/getting-started/getting-started.module.css b/example/src/page/getting-started/getting-started.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/example/src/page/getting-started/getting-started.tsx b/example/src/page/getting-started/getting-started.tsx
new file mode 100644
index 0000000..30ba5f3
--- /dev/null
+++ b/example/src/page/getting-started/getting-started.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import CommonHighlighter from '../../component/common-highlighter';
+
+function GettingStarted() {
+ return (
+ ๐ฌ Simple Example
+Here's a simple example of how to use our package:
++
+
+
+ Basic Usage
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+
+
+
+ Duration
+ +
+ default:
+ 3000
+
+ The duration option, in milliseconds, allows you to
+ control how long the toast message is displayed. There are two
+ different ways to set it as shown in the example.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ return (
+ <>
+
+
+
+ );
+}`}
+
+
+
+
+ className
+ +
+ default:
+ undefined
+
+ The className option allows you to customize the style
+ of the toast message. You can provide your own CSS class name and
+ define the styles in your CSS file as shown in the example.
+
+
+
+
+ {`/* my-style.css */
+
+.my-toast > div {
+ background-color: rgba(255, 255, 255, 0.95);
+ color: #333;
+ border-radius: 3px;
+}`}
+
+
+ {`import toast from 'react-simple-toasts';
+import 'my-style.css';
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+
+
+
+ clickable
+ +
+ default:
+
+ false
+
+ The clickable option allows you to make the toast
+ message interactive, meaning it can be clicked. Once{' '}
+ clickable is set to true, you can provide an{' '}
+ onClick handler to execute an action when the toast is
+ clicked, as demonstrated in the example.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+
+ const handleClick = () => {
+ toast('Hello, World!', {
+ clickable: true,
+ onClick: () => alert('Clicked!'),
+ });
+ }
+
+ return (
+
+ );
+}`}
+
+
+
+
+ clickClosable
+ +
+ default:
+
+ false
+
+ The clickClosable prop allows users to dismiss the
+ toast by clicking on it. When set to true, a click
+ anywhere on the toast message will close the toast. This provides an
+ additional, user-friendly way to dismiss toasts, beyond waiting for
+ them to automatically disappear.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+
+
+
+ position
+ +
+ default:
+
+ bottom-center
+
+ The position prop determines the location on the screen
+ where the toast will appear. Available positions include "top-left",
+ "top-center", "top-right", "bottom-left", "bottom-center",
+ "bottom-right", and "center". This gives you the flexibility to
+ ensure that the toast doesn't interfere with other important UI
+ elements.
+
+
+
+
+
+ {`import toast, { ToastPosition } from 'react-simple-toasts';
+
+export default function App() {
+ const [position, setPosition] = useState('bottom-center');
+
+ const handleClick = () => {
+ toast('Hello, World!', { position });
+ }
+
+ return (
+ <>
+
+
+
+
+ );
+}`}
+
+
+
+ maxVisibleToasts
+ +
+ default:
+
+ undefined
+
+ The maxVisibleToasts prop sets a limit to the number of
+ toasts that can be displayed on the screen at the same time. If more
+ toasts are triggered while the limit is reached, they will be queued
+ and displayed as older toasts disappear. This helps prevent a
+ scenario where a large number of toasts are displayed
+ simultaneously, potentially disrupting the user experience.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+ ๐ Advanced Example
+This is a more advanced example with additional options:
++ +
+
+
+ Infinite Toast
+ +
+ If you want to create a toast notification that stays on the screen
+ indefinitely until manually closed, you can pass{' '}
+ Infinity as the duration. This will create an "infinite
+ toast". The example below shows how to create an infinite toast and
+ provide a button for manually closing it. This can be useful in
+ scenarios where you want to make sure a critical message is not
+ missed by the user.
+
+
+
+
+
+ {`import toast, { Toast } from 'react-simple-toasts';
+
+export default function App() {
+ const [infiniteToast, setInfiniteToast] = useState(null);
+
+ const handleShowClick = () => {
+ const infiniteToast = toast('Hello, World!', Infinity);
+ setInfiniteToast(infiniteToast);
+ };
+
+ const handleCloseClick = () => {
+ infiniteToast?.close();
+ setInfiniteToast(null);
+ };
+
+ return (
+ <>
+
+
+
+ );
+}`}
+
+
+
+ Updating Toasts in Real-time
+ +
+ The example below demonstrates how to dynamically update the content
+ of a toast message in real-time. Here, a countdown timer is
+ implemented to show the remaining lifetime of the toast. It's
+ updated every 100 milliseconds until the toast is automatically
+ closed after 5 seconds. The update function of the
+ toast instance is used to accomplish this.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ const handleClick = () => {
+ const DURATION = 5000;
+ const toastCreatedAt = Date.now();
+ const updatableToast = toast('Toast will close in 5s', DURATION);
+
+ setInterval(() => {
+ const remainingTime = Math.max(0, DURATION - (Date.now() - toastCreatedAt));
+ updatableToast?.update(\`Toast will close in \${(remainingTime / 1000).toFixed(1)}s\`);
+ }, 100);
+ };
+
+ return (
+
+ );
+}`}
+
+ ๐จ Custom Example
+Want to get creative? Here's how you can customize our package:
++ +
+
+
+
+ render
+
+ default:
+ undefined
+
+ The render 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.
+
+
+
+
+ {`import toast from 'react-simple-toasts';
+
+export default function App() {
+ const handleClick = () => {
+ toast('Hello, World! ๐', {
+ render: (message) => {message} ,
+ });
+ };
+
+ return (
+
+ );
+}`}
+
+
+ The render option is typically used with{' '}
+ createToast or toastConfig for creating
+ more complex and customizable toast notifications.
+
+
createToast
+
+ {`import { createToast } from 'react-simple-toasts';
+
+const myToast = createToast({
+ render: (message) => {message} ,
+});
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+ +
toastConfig
+
+ {`import toast, { toastConfig } from 'react-simple-toasts';
+
+toastConfig({
+ render: (message) => {message} ,
+});
+
+export default function App() {
+ return (
+
+ );
+}`}
+
+
+ For the differences between createToast and{' '}
+ toastConfig, please refer to the{' '}
+ API documentation.
+
+
+
+{`// with npm
+npm install react-simple-toasts
+
+// with yarn
+yarn add react-simple-toasts`}
+
+
+
+
+ {`import React from 'react';
+import toast from 'react-simple-toasts';
+
+function App() {
+ return (
+
+
+
+
+ );
+}
+
+export default GettingStarted;
diff --git a/example/src/page/getting-started/index.ts b/example/src/page/getting-started/index.ts
new file mode 100644
index 0000000..c1aeb2b
--- /dev/null
+++ b/example/src/page/getting-started/index.ts
@@ -0,0 +1 @@
+export { default } from './getting-started';
diff --git a/example/src/page/home/home.module.css b/example/src/page/home/home.module.css
new file mode 100644
index 0000000..10af336
--- /dev/null
+++ b/example/src/page/home/home.module.css
@@ -0,0 +1,8 @@
+.features {
+ padding-left: 20px;
+ list-style: disc;
+}
+
+.features li + li {
+ margin-top: 10px;
+}
diff --git a/example/src/page/home/home.tsx b/example/src/page/home/home.tsx
new file mode 100644
index 0000000..cc285b5
--- /dev/null
+++ b/example/src/page/home/home.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import styles from './home.module.css';
+import toast from 'react-simple-toasts';
+import Button from '../../component/button';
+
+function Home() {
+ return (
+ ๐ฆ Installation
++ To get started with React Simple Toasts, install the package using npm + or yarn: +
++
๐ Usage
+Here is a simple example of how to use React Simple Toasts:
++
+
+
+ );
+}
+
+export default App;`}
+ +
๐ Benefits of using React Simple Toasts:
+-
+
- No need for Provider or any wrapper components. +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Home;
diff --git a/example/src/page/home/index.ts b/example/src/page/home/index.ts
new file mode 100644
index 0000000..2fdb147
--- /dev/null
+++ b/example/src/page/home/index.ts
@@ -0,0 +1 @@
+export { default } from './home';
diff --git a/example/src/root.tsx b/example/src/root.tsx
new file mode 100644
index 0000000..eb8ef70
--- /dev/null
+++ b/example/src/root.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import Layout from './component/layout';
+import { Outlet } from 'react-router-dom';
+
+function Root() {
+ return (
+ ๐ Overview
++ React Simple Toasts is a lightweight, easy-to-use library for creating + toast notifications in your React applications. +
++ +
๐ Key Features
+-
+
- + Ease of use: With a simple installation process and an + intuitive API, you can get started with the library in no time. + +
- + Highly customizable: You can control various aspects of your + toast messages, from their appearance and duration to their behavior + upon user interaction. + +
- + Custom rendering: The library supports custom rendering, + allowing you to tailor the look of your toast messages to match your + application's branding. + +
- + Positioning: The library allows you to position your toasts + at any corner or center of the viewport, offering a high level of + control over where your messages appear. + +
- + Browser compatibility: The library includes utility functions + to ensure that it works seamlessly across different browsers. + +
- + Interactive: The library allows toasts to be clickable and to + close on click if desired, enabling user interaction. + +
- + Multiple toasts management: It provides functionality to + manage multiple toasts by controlling the maximum number of visible + toasts at a time. + +
๐ Support Us
++ If you find this library useful, consider giving us a star on{' '} + + GitHub + + ! Your support is greatly appreciated and it helps the project grow. +
+โ๏ธ License
+This project is licensed under the terms of the MIT license.
+