Crayons

# Toast (fw-toast)

Toasts are used to show pop-up messages that lasts on the screen for a while. Use them to show users alerts or messages. You can also use custom HTML content with in toast

# Demo

Custom content

custom html contents can be added
Test content custom html contents can be added
 Success Error Warning Inprogress Custom Toast Content Custom Toast Content 1
Show Code

# Usage

# ToastController

You can also use ToastController to create Toast like below:

Javascript - import {  ToastController } from "@freshworks/crayons"
React - import {  ToastController } from "@freshworks/crayons/react"

Create an instance of ToastController by passing ToastOptions (optional) and use Methods to manage toast

const toast = ToastController({ position: 'top-right' });
toast.trigger({ type: 'success', content: 'Successfullly triggered' });

# ToastOptions

Below is the interface for ToastOptions that can be used for creating the toast

interface ToastOptions {
  /**
   * The Content of the action link
   */
  actionLinkText?: string;
  /**
   * The content to be displayed in toast
   */
  content?: string;
  /**
   * The document selector for the toast-message component
   * which can be used to embed custom html content in the toast message
   */
  contentref?: string;
  /**
   * Pause the toast from hiding on mouse hover
   */
  pauseOnHover?: boolean;
  /**
   * won't close automatically
   * Default is `false`
   */
  sticky?: boolean;
  /**
   * Time duration of the toast visibility
   * Default is `4000`
   */
  timeout?: number;
  /**
   * Type of the toast - success,failure, warning, inprogress
   * Default is `warning`
   */
  type?: 'success' | 'error' | 'warning' | 'inprogress';
  /**
   *  position of the toast notification in screen
   *  Default is `top-center`
   */
  position?: 'top-center' | 'top-left' | 'top-right';
}

# Custom template event naming

Please make sure when using event handler inside custom template in a React app, the event handler name is in lowercase. For example use onclick instead of onClick. This helps in cloning the event handlers used in the template when displaying multiple toast messages. Refer usage

 useEffect(() => {
   el1.current.onclick = function() {
     console.log("custom action handled here");
   }
  },[])
 <FwButton onclick={()=> console.log("custom action here")}>Action button</FwButton>
 <FwButton ref={el1}>In Typescript apps</FwButton>

# Properties

Property Attribute Description Type Default
actionLinkText action-link-text The Content of the action link string ''
content content The content to be displayed in toast string undefined
pauseOnHover pause-on-hover Pause the toast from hiding on mouse hover boolean undefined
position position position of the toast notification in screen "top-center" \| "top-left" \| "top-right" 'top-center'
sticky sticky won't close automatically boolean false
timeout timeout Time duration of the toast visibility number 4000
type type Type of the toast - success,failure, warning, inprogress "error" \| "inprogress" \| "success" \| "warning" 'warning'

# Methods

# trigger(opts: ToastOptions) => Promise<void>

# Returns

Type: Promise<void>

# Dependencies

# Depends on

# Graph

graph TD;
  fw-toast --> fw-toast-message
  fw-toast-message --> fw-spinner
  fw-toast-message --> fw-icon
  style fw-toast fill:#f9f,stroke:#333,stroke-width:4px

Built with ❤ at Freshworks

← Toast Message (fw-toast-message) →