Installation

NPM Installation

Install robot-toast using npm:

npm install robot-toast

Basic Usage

Import and use robot-toast in your application:

import { toast } from 'robot-toast';

// Show a simple toast
toast({
  message: 'Hello, World!',
  position: 'bottom-right',
  robotVariant: 'wave.svg'
});

Position Options

Available positions for your toasts:

position: `$top-right`

position: `$top-left`

position: `$top-center`

position: `$bottom-right`

position: `$bottom-left`

position: `$bottom-center`

Available Robot Variants

Choose from 16 adorable robot characters:

🤖angry.svg

🤖angry2.svg

🤖base.svg

🤖base2.svg

🤖error.svg

🤖head-palm.svg

🤖loading.svg

🤖search.svg

🤖shock.svg

🤖sleep.svg

🤖success.svg

🤖think.svg

🤖type.svg

🤖validation.svg

🤖validation2.svg

🤖wave.svg

Toast Types

Different toast types for different messages:

ℹ️

info

Informational messages

✅

success

Success confirmations

⚠️

warning

Warning messages

❌

error

Error messages

💬

default

Default messages

Themes

Three beautiful themes to match your design:

Light

Clean white background with subtle shadows

Dark

Dark background perfect for night mode

Colored

Vibrant gradient background with personality

Configuration Options

message

The notification message

string

default: required

position

Toast position

string

default: bottom-right

type

Toast type (info, success, warning, error)

string

default: default

theme

Theme (light, dark, colored)

string

default: light

autoClose

Auto-close duration in ms, or false to disable

boolean|number

default: 5000

draggable

Allow dragging

boolean

default: true

pauseOnHover

Pause on hover

boolean

default: true

hideProgressBar

Hide progress bar

boolean

default: false

transition

Animation (bounce, slide, zoom, flip)

string

default: bounce

Complete Example

import { toast } from 'robot-toast';

// Success notification with all options
toast({
  message: 'Profile updated successfully!',
  position: 'bottom-right',
  type: 'success',
  theme: 'light',
  robotVariant: 'success.svg',
  autoClose: 4000,
  draggable: true,
  pauseOnHover: true,
  hideProgressBar: false,
  transition: 'slide'
});