### Install Sileo Toast Component using npm Source: https://sileo.aaryan.design/docs/index This command installs the Sileo toast component package using npm. Ensure you have Node.js and npm installed on your system. ```bash npm install sileo ``` -------------------------------- ### Quick Setup: Add Toaster to React App Root Source: https://sileo.aaryan.design/docs/index Integrates the Sileo Toaster component into your React application's root layout. This setup allows you to trigger toasts from anywhere within your app using the `sileo` function. It requires importing `sileo` and `Toaster` from the 'sileo' package. ```jsx import { sileo, Toaster } from "sileo"; export default function App() { return ( <> ); } ``` -------------------------------- ### Handle Promise with Loading, Success, and Error States Source: https://sileo.aaryan.design/docs/api Shows how to use `sileo.promise()` to manage a toast's lifecycle during an asynchronous operation. This example displays a loading state, then updates to a success state with user data or an error state with the error message. ```javascript sileo.promise(createUser(data), { loading: { title: "Creating account..." }, success: (user) => ({ title: `Welcome, ${user.name}!`, }), error: (err) => ({ title: "Signup failed", description: err.message, }), }); ``` -------------------------------- ### Set Global Toast Defaults with Toaster Options Source: https://sileo.aaryan.design/docs/styling Configure default styling for all toasts using the `options` prop on the `Toaster` component. This allows setting properties like `fill`, `roundness`, and `styles` for elements like the description. ```javascript ``` -------------------------------- ### Display Custom Styled Success Toast Source: https://sileo.aaryan.design/docs/api Demonstrates how to display a success toast with custom styling applied to its title, description, badge, and button. This example utilizes the 'fill' option for dark mode compatibility and custom CSS classes via the 'styles' property. ```javascript sileo.success({ title: "Custom styled", fill: "black", styles: { title: "text-white!", description: "text-white/75!", badge: "bg-white/20!", button: "bg-white/10!", }, }); ``` -------------------------------- ### Configure Toaster Position in React Source: https://sileo.aaryan.design/docs/index Demonstrates how to set a default position for all toasts using the `Toaster` component and how to override the position for individual toasts. This allows for flexible placement of notifications within the React application. Available positions include `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, and `bottom-right`. ```jsx sileo.success({ title: "Saved", position: "bottom-center", }); ``` -------------------------------- ### Import Sileo Toast Controller Source: https://sileo.aaryan.design/docs/api Import the sileo toast controller from the 'sileo' package. This import makes all sileo methods available globally. ```javascript import { sileo } from "sileo"; ``` -------------------------------- ### Define Promise Options for Loading States Source: https://sileo.aaryan.design/docs/api Defines the structure for options passed to `sileo.promise()`. It includes configurations for loading, success, and error states, allowing for dynamic updates based on promise resolution or rejection. ```typescript interface ToastPromiseOptions { loading: Pick; success: ToastOptions | ((data: T) => ToastOptions); error: ToastOptions | ((err: unknown) => ToastOptions); } ``` -------------------------------- ### Sileo Toast Methods Source: https://sileo.aaryan.design/docs/api This section details the various methods available in the Sileo toast controller for displaying different types of toasts. ```APIDOC ## Sileo Toast Controller The global toast controller can be imported and used anywhere to fire toasts. ```javascript import { sileo } from "sileo"; ``` ### Methods - **sileo.success(options)**: Displays a green success toast. - **sileo.error(options)**: Displays a red error toast. - **sileo.warning(options)**: Displays an amber warning toast. - **sileo.info(options)**: Displays a blue info toast. - **sileo.action(options)**: Displays a toast with an action button. - **sileo.show(options)**: Displays a generic toast without a state badge. - **sileo.promise(promise, opts)**: Handles a promise, showing a loading state until it resolves or rejects, then displaying a success or error toast. All methods return the toast `id` as a string, except `promise` which returns the original promise. ### `ToastOptions` Passed to every `sileo.*()` method. These options configure the appearance and behavior of the toast. | Prop | Type | Default | Description | |---|---|---|---| | title | string | — | Toast heading | | description | ReactNode | string | — | Body content, supports JSX | | position | ToastPosition | Toaster default | Override position for this toast | | duration | number | null | 6000 | Auto-dismiss ms. null = sticky | | icon | ReactNode | null | null | Custom icon in the badge | | fill | string | — | Badge fill color, or "black" for full dark mode | | styles | ToastStyles | — | Class overrides for sub-elements | | roundness | number | 18 | Border radius in pixels | | autopilot | boolean | object | true | Auto expand/collapse timing | | button | ToastButton | — | Action button config | ### `ToastButton` Configuration for an action button within a toast. ```typescript interface ToastButton { title: string; onClick: () => void; } ``` ### `ToastStyles` Override classes for individual toast sub-elements. ```typescript interface ToastStyles { title?: string; description?: string; badge?: string; button?: string; } ``` #### Example Usage with `ToastStyles` ```javascript sileo.success({ title: "Custom styled", fill: "black", styles: { title: "text-white!", description: "text-white/75!", badge: "bg-white/20!", button: "bg-white/10!", }, }); ``` ### `ToastPromiseOptions` Passed as the second argument to `sileo.promise()` to configure the loading, success, and error states. ```typescript interface ToastPromiseOptions { loading: Pick; success: ToastOptions | ((data: T) => ToastOptions); error: ToastOptions | ((err: unknown) => ToastOptions); } ``` The `success` and `error` fields can be static options or callbacks that receive the resolved/rejected value. #### Example Usage with `sileo.promise()` ```javascript sileo.promise(createUser(data), { loading: { title: "Creating account..." }, success: (user) => ({ title: `Welcome, ${user.name}!`, }), error: (err) => ({ title: "Signup failed", description: err.message, }), }); ``` ``` -------------------------------- ### Define Toast Button Configuration Source: https://sileo.aaryan.design/docs/api Defines the structure for a toast action button, including its title and an associated click handler. This interface is used to configure buttons for the 'sileo.action' method. ```typescript interface ToastButton { title: string; onClick: () => void; } ``` -------------------------------- ### Define Toast Styles for Customization Source: https://sileo.aaryan.design/docs/api Defines an interface for overriding default CSS classes of individual toast sub-elements. This allows for granular control over the appearance of toast titles, descriptions, badges, and buttons. ```typescript interface ToastStyles { title?: string; description?: string; badge?: string; button?: string; } ``` -------------------------------- ### Set Default Toaster Options (JSX) Source: https://sileo.aaryan.design/docs/api/toaster Shows how to configure default options for all toasts rendered by the Toaster component. These options are merged into every toast, allowing for consistent styling and behavior. ```jsx ``` -------------------------------- ### Import Toaster Component (TypeScript) Source: https://sileo.aaryan.design/docs/api/toaster Imports the Toaster component from the 'sileo' library. This is a necessary first step before using the component in your application. ```typescript import { Toaster } from "sileo"; ``` -------------------------------- ### Configure Toaster Offset (JSX) Source: https://sileo.aaryan.design/docs/api/toaster Demonstrates how to set the offset for the Toaster component. The offset can be a single number for uniform spacing or an object for per-side specific spacing. ```jsx ``` ```jsx ``` -------------------------------- ### Toaster Component Source: https://sileo.aaryan.design/docs/api/toaster The Toaster component renders toast notifications. Add it once to your layout to manage all toasts globally. It accepts props for position, offset, and default options. ```APIDOC ## Toaster Component ### Description The `Toaster` component renders toast notifications. It should be added once to your application's layout. ### Method N/A (Component) ### Endpoint N/A (Component) ### Parameters #### Props - **position** (ToastPosition) - Default: "top-right" - Specifies the default position for all toasts. - **offset** (number | string | object) - Default: 16 - Defines the distance from the viewport edges. Can be a number, string, or a per-side configuration object (e.g., `{ top: 20, right: 16 }`). - **options** (Partial) - Default: — - Sets default options that are merged into every toast. ### Request Example ```jsx ``` ### Response #### Success Response (Rendered Toasts) - **N/A** - The component renders UI elements (toasts) based on its props and internal state. #### Response Example (N/A - This is a UI component, not a data endpoint) ## `ToastPosition` Type ### Description Defines the possible positions for toast notifications. ### Type Definition ```typescript type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; ``` ``` -------------------------------- ### ToastPosition Type Definition (TypeScript) Source: https://sileo.aaryan.design/docs/api/toaster Defines the possible string literal values for the `ToastPosition` type, specifying where toasts can be displayed within the viewport. ```typescript type ToastPosition = | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.