react-minimal-toast

🙋‍♂️ Made by @abhijithvijayan

Donate: PayPal, Patreon

---

❤️ it? ⭐️ it on GitHub or Tweet about it.

Table of Contents

• Installation
• Usage
• API
• Issues
  • 🐛 Bugs
• LICENSE

Installation

Ensure you have Node.js 10 or later installed. Then run the following:

# via npm
npm install react-minimal-toast

# or yarn
yarn add react-minimal-toast

Usage

import * as React from 'react';
import {ToastProvider, useToasts} from 'react-minimal-toast';
import 'react-minimal-toast/lib/ReactMinimalToast.css';

const ToastDemo = () => {
    const {addToast} = useToasts();

    return (
        <button onClick={() => addToast('This is a toast', {
            position: 'bottom-right',
            type: 'warning',
        })}>
            Add Toast
        </button>
    );
};

const App = () => {
    return (
        <ToastProvider position={'top-left'} type={'default'}>
            <ToastDemo />
        </ToastProvider>
    );
};

API

ToastProvider Props

position

Type: string

Options: top-center | top-left | top-right | bottom-left | bottom-right | bottom-center

Default: top-right

Position of the toast.

type

Type: string

Options: info | success | warning | error | default

Default: default

Color variant of the toast.

hideTypeIcon

Type: boolean

Options: true | false

Default: false

Hide the variant icon from toast

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue here for bugs, missing documentation, or unexpected behavior.

See Bugs

Linting & TypeScript Config

• Shared Eslint & Prettier Configuration - @abhijithvijayan/eslint-config
• Shared TypeScript Configuration - @abhijithvijayan/tsconfig

License

MIT © Abhijith Vijayan