Toast Your Messages With Emoji

A React toast component to toast your messages with emojis.

How to use it:

1. Install and import.

# Yarn
$ yarn add @emotion/react @emotion/styled framer-motion @hanseo0507/react-toast

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ToastProvider } from '@hanseo0507/react-toast';
import App from './App';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ToastProvider>
      <App />
    </ToastProvider>
  </React.StrictMode>
);

import React from 'react';
import { useToast } from '@hanseo0507/react-toast';
function App() {
  const { toast } = useToast();
  return (
    <div>
      <button onClick={() => toast.info('Awesome Toast!')}>🍞 Toast!</button>
    </div>
  );
}
export default App;

2. Use cases.

import { ToastOptions, ToastPosition } from '@hanseo0507/react-toast';

const options: ToastOptions = {
  position: ToastPosition.topRight,
  duration: 3000, // 3s
};

/// default
toast({ emoji: '🎉', emojiBackground: '#ECA0FF', text: 'Awesome Toast!' }, options);

// with linear-gradient
toast({ emoji: '🎉', emojiBackground: ['#ECA0FF', '#778DFF'], text: 'Awesome Toast!' }, options);

// linear-gradient with degree
toast(
  { emoji: '🎉', emojiBackground: ['70deg', '#ECA0FF', '#778DFF'], text: 'Awesome Toast!' },
  options
);

// Info Toast -> { emoji: "ℹ️", emojiBackground: "#A0C9F0" } will be set
toast.info('Info Tost!', options);

// Success Toast -> { emoji: "✅", emojiBackground: "#6AD76A" } will be set
toast.success('Success Tost!', options);

// Warning Toast -> { emoji: "🚧", emojiBackground: "#F3E45C" } will be set
toast.warn('Warning Tost!', options);
toast.warning('Warning Toast!', options);

// Error/Danger Toast -> { emoji: "🚨", emojiBackground: "#F3655C" } will be set
toast.danger('Warning Tost!', options);
toast.error('Warning Toast!', options);

Preview:

Download Details:

Author: hanseo0507

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/hanseo0507/react-toast

License: MIT