React-upload-easy-toastify NPM

React-Toastify

React toastify

🎉 React-Toastify allow you to add notification to your app with ease. No more nonsense!

Demo

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

RC.5 useLazyContainer has been removed. The lazy container is opt-in

Features

Easy to setup for real, you can make it work in less than 10sec!
Super easy to customize
RTL support
Swipe to close 👌
Can display a react component inside the upload!
Has onOpen and onClose hooks. Both can access the props passed to the react component rendered inside the upload
Can remove a upload programmatically
Define behavior per upload
Pause upload when window loses focus 👁
Fancy progress bar to display the remaining time
Possibility to update a upload
You can control the progress bar a la nprogress 😲
Starting v5 the UploadContainer is optional if you want to 😎

Usage

One component to rule them all

One UploadContainer to render them

The toasts inherit UploadContainer's props. Props defined on upload supersede UploadContainer's props.

  import React, { Component } from 'react';
  import { UploadContainer, upload } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  // minified version is also included
  // import 'react-toastify/dist/ReactToastify.min.css';

  class App extends Component {
    notify = () => upload("Wow so easy !");

    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify !</button>
          <UploadContainer />
        </div>
      );
    }
  }

Remember to render the UploadContainer once in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.

What if I told you that the UploadContainer is optional

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';

  // Call it once in your app. At the root of your app is the best place
  upload.configure()

  const App = () => {
    const notify = () => upload("Wow so easy !");
    
    return <button onClick={notify}>Notify !</button>;
  }

The library will mount a UploadContainer for you if none is mounted.

Configure the UploadContainer when it is mounted on demand

The configure function accept the same props as the UploadContainer. As soon as the container is rendered call to configure will have no effect.

upload.configure({
  autoClose: 8000,
  draggable: false,
  //etc you get the idea
});

Multi container support

To enable multiple container support, you have to pass enableMultiContainer and specify a containerId and use it in each upload, to do so add containerId to the upload's options object.

Note: adding enableMultiContainer prop to the <UploadContainer/ > will:

Check each upload to verify if its containerId match the container containerId so it can be rendered.
Ensure not to render any upload that has containerId.
Render any upload if both the upload and <UploadContainer/ > does not include containerId and containerId respectively.

A simple example to demonstrate multi upload container capability.

Notify A button will show a upload on the bottom left.
Notify B button will show a upload on the top right.

  import React, { Component } from 'react';
  import { UploadContainer, upload } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';


 class App extends Component {
    notifyA = () => upload('Wow so easy !', {containerId: 'A'});
    notifyB = () => upload('Wow so easy !', {containerId: 'B'});

    render(){
      return (
        <div>
            <UploadContainer enableMultiContainer containerId={'A'} position={upload.POSITION.BOTTOM_LEFT} />
            <UploadContainer enableMultiContainer containerId={'B'} position={upload.POSITION.TOP_RIGHT} />
     
            <button onClick={this.notifyA}>Notify A !</button>
            <button onClick={this.notifyB}>Notify B !</button>          
        </div>
      );
    }
  }

Positioning upload

By default, all the toasts will be positioned on the top right of your browser. If a position is set on a upload, the one defined on UploadContainer will be replaced.

The following values are allowed: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left

For convenience, upload expose a POSITION property to avoid any typo.

 // upload.POSITION.TOP_LEFT, upload.POSITION.TOP_RIGHT, upload.POSITION.TOP_CENTER
 // upload.POSITION.BOTTOM_LEFT,upload.POSITION.BOTTOM_RIGHT, upload.POSITION.BOTTOM_CENTER

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  class Position extends Component {
    notify = () => {
      upload("Default Notification !");

      upload.success("Success Notification !", {
        position: upload.POSITION.TOP_CENTER
      });

      upload.error("Error Notification !", {
        position: upload.POSITION.TOP_LEFT
      });

      upload.warn("Warning Notification !", {
        position: upload.POSITION.BOTTOM_LEFT
      });

      upload.info("Info Notification !", {
        position: upload.POSITION.BOTTOM_CENTER
      });

      upload("Custom Style Notification with css class!", {
        position: upload.POSITION.BOTTOM_RIGHT,
        className: 'foo-bar'
      });
    };

    render(){
      return <button onClick={this.notify}>Notify</button>;
    }
  }

Set autoclose delay or disable it

Set the default delay

  import React from 'react';
  import { UploadContainer } from 'react-toastify';

  // close upload after 8 seconds
  const App = () => (
    <UploadContainer autoClose={8000} />
  );

Set the delay per upload for more control

  import React from 'react';
  import { UploadContainer, upload } from 'react-toastify';

  class App extends Component {
    closeAfter15 = () => upload("YOLO", { autoClose: 15000 });

    closeAfter7 = () => upload("7 Kingdoms", { autoClose: 7000 });

    render(){
      return (
        <div>
          <button onClick={this.closeAfter15}>Close after 15 seconds</button>
          <button onClick={this.closeAfter7}>Close after 7 seconds</button>
          <UploadContainer autoClose={8000} />
        </div>
      );
    }
  }

Disable it by default

    <UploadContainer autoClose={false} />

Disable it per upload

    upload("hello", {
      autoClose: false
    })

Render a component

When you render a component, a closeToast function is passed as a props. That way you can close the upload on user interaction for example.

import React from 'react';
import { UploadContainer, upload } from "react-toastify";

const Msg = ({ closeToast }) => (
  <div>
    Lorem ipsum dolor
    <button>Retry</button>
    <button onClick={closeToast}>Close</button>
  </div>
)

const App = () => (
  <div>
    <button onClick={() => upload(<Msg />)}>Hello 😀</button>
    <UploadContainer />
  </div>
);

You can also render a component using a function. More or less like a "render props":

upload(({ closeToast }) => <div>Functional swag 😎</div>);

Remove a upload programmatically

An id is returned each time you display a upload, use it to remove a given upload programmatically by calling upload.dismiss(id)

Without args, all the displayed toasts will be removed.

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  class Example extends Component {
    toastId = null;

    notify = () => this.toastId = upload("Lorem ipsum dolor");

    dismiss = () =>  upload.dismiss(this.toastId);

    dismissAll = () =>  upload.dismiss();

    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
          <button onClick={this.dismiss}>Dismiss</button>
          <button onClick={this.dismissAll}>Dismiss All</button>
        </div>
      );
    }
  }

Usage with redux

"Talk is cheap. Show me the code"

Pause upload timer when the window loses focus

The default behavior is to pause the upload timer whenever the window loses focus. You can opt-out by setting the pauseOnFocusLoss props to false:

// Opt-out for all upload
<UploadContainer pauseOnFocusLoss={false} />

// Opt-out per upload
upload('Hello', {
  pauseOnFocusLoss: false
})

Use a custom id

A custom toastId can be used to replace the one generated. You can use a number or a string.

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  class Example extends Component {
    notify = () => {
      upload("I cannot be duplicated !", {
        toastId: 13
      });
    }

    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
        </div>
      );
    }
  }

Prevent duplicate

To prevent duplicates, you can check if a given upload is active by calling upload.isActive(id) like the snippet below. Or, you can use a custom toastId:

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  class Example extends Component {
    toastId = null;
    customToastId = 'xxx-yyy';

    notify = () => {
      if (! upload.isActive(this.toastId)) {
        this.toastId = upload("I cannot be duplicated !");
      }

      upload("xxx-yyy cannot be duplicated", {
        toastId: customToastId
      });
    }

    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
        </div>
      );
    }
  }

Delay notification appearance

You can delay the notification appearance as shown below. Under the hood the lib simply use setTimeout.

upload('Show now');
upload('Show after 1sec', { delay: 1000 })

Note: upload.dismiss() has no effect if called during the delay before a given upload appears.

Use a controlled progress bar

Imagine you want to see the progress of a file upload. The example below feature axios, but it works with anything!

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';
  import axios from 'axios';

  class Example extends Component {
    upload = () => {
      // we need to keep a reference of the toastId to be able to update it
      let toastId = null;

      axios.request({
        method: "post", 
        url: "/foobar", 
        data: myData, 
        onUploadProgress: p => {
          const progress = p.loaded / p.total;

          // check if we already displayed a upload
          if(toastId === null){
              toastId = upload('Upload in Progress', {
              progress: progress
            });
          } else {
            upload.update(toastId, {
              progress: progress
            })
          }
        }
      }).then (data => {
        // Upload is done! 
        // The remaining progress bar will be filled up
        // The upload will be closed when the transition end
        upload.done(upload.id)
      })
    }

    render(){
      return (
        <div>
          <button onClick={this.upload}>Upload something</button>
        </div>
      );
    }
  }

Update a upload

When you update a upload, the upload options and the content are inherited but don't worry you can update them.

update-without-transition

Basic example

import React, { Component } from 'react';
import { upload } from 'react-toastify';

class Update extends Component {
  toastId = null;

  notify = () => this.toastId = upload("Hello", { autoClose: false });

  update = () => upload.update(this.toastId, { type: upload.TYPE.INFO, autoClose: 5000 });

  render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
          <button onClick={this.update}>Update</button>
        </div>
      )
  }
}

Update the content

If you want to change the content it's straightforward as well. You can render any valid element including a react component. Pass your value to a render option as follow:

 // With a string
 upload.update(this.toastId, {
    render: "New content",
    type: upload.TYPE.INFO,
    autoClose: 5000
  });

// Or with a component
upload.update(this.toastId, {
    render: <MyComponent />
    type: upload.TYPE.INFO,
    autoClose: 5000
  });

Update the upload id

If you want to update the toastId it can be done. But don't forget to use the new id!

const myNewToastId = 'loremIpsum';

upload.update(this.toastId, {
  render: "New content",
  type: upload.TYPE.INFO,
  autoClose: 5000,
  toastId: myNewToastId
});

upload.update(myNewToastId, {
  render: <MyComponent />
  autoClose: 6000
});

Apply a transition

By default, when you update a upload, there is no transition applied. If you want to apply a transition, it can be done via the className or the transition option:

update-with-transition

// with css
upload.update(this.toastId, {
  render: "New Content",
  type: upload.TYPE.INFO,
  //Here the magic
  className: 'rotateY animated'
})

// with glamor
upload.update(this.toastId, {
  render: "New Content",
  type: upload.TYPE.INFO,
  //Here the magic
  className: css({
    transform: "rotateY(360deg)",
    transition: "transform 0.6s"
  })
})

// with transition
upload.update(this.toastId, {
  render: "New Content",
  type: upload.TYPE.INFO,
  //Here the magic
  transition: Rotate
})

Reset option or inherit from UploadContainer

If you want to inherit props from the UploadContainer, you can reset an option by passing null. It's particulary useful when you remove the closeButton from a upload and you want it back during the update:

class Update extends Component {
  toastId = null;

  notify = () => this.toastId = upload("Hello", {
      autoClose: false,
      closeButton: false // Remove the closeButton
    });

  update = () => upload.update(this.toastId, {
      type: upload.TYPE.INFO,
      autoClose: 5000,
      closeButton: null // The closeButton defined on UploadContainer will be used
    });

  render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>
          <button onClick={this.update}>Update</button>
        </div>
      )
  }
}

Define callback

You can define two callbacks on upload. They are really useful when the upload are not used only to display messages.

onOpen is called inside componentDidMount
onClose is called inside componentWillUnmount

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  class Hook extends Component {
    notify = () => upload(<MyComponent foo="bar" />, {
      onOpen: ({ foo }) => window.alert('I counted to infinity once then..'),
      onClose: ({ foo }) => window.alert('I counted to infinity twice')
    });

    render(){
      return <button onClick={this.notify}>Notify</button>;
    }
  }

Listen for change

If you want to know when a upload is displayed or removed, upload expose a onChange method:

upload.onChange( (numberOfToastDisplayed, containerId) => {
  // Do whatever you want
  // The containerId is usefull when working with multiple containers
});

Set a custom close button or simply remove it

Override the default one

You can pass a custom close button to the UploadContainer to replace the default one.

⚠️ When you use a custom close button, your button will receive a closeToast function. You need to call it in order to close the upload. ⚠️

  import React, { Component } from 'react';
  import { upload, UploadContainer } from 'react-toastify';

  const CloseButton = ({ YouCanPassAnyProps, closeToast }) => (
    <i
      className="material-icons"
      onClick={closeToast}
    >
    delete
    </i>
  );

  class CustomClose extends Component {
    notify = () => {
      upload("The close button change when Chuck Norris display a upload");
    };

    render(){
      return (
        <div>
          <button onClick={this.notify}>Notify</button>;
          <UploadContainer closeButton={<CloseButton YouCanPassAnyProps="foo" />} />
        </div>
      );
    }
  }

Define it per upload

  import React, { Component } from 'react';
  import { upload } from 'react-toastify';

  // Let's use the closeButton we defined on the previous example
  class CustomClose extends Component {
    notify = () => {
      upload("The close button change when Chuck Norris display a upload",{
        closeButton: <CloseButton YouCanPassAnyProps="foo" />
      });
    };

    render(){
      return <button onClick={this.notify}>Notify</button>;
    }
  }

Remove it

Sometimes you don't want to display a close button. It can be removed globally or per upload. Pass false to closeButton props:

remove it by default

    <UploadContainer closeButton={false} />

remove it per upload

    upload("hello", {
      closeButton: false
    })

-- if you removed it globally, you can display the default Button per upload (or you can set your custom button)

    upload("hello", {
      closeButton: true // or <FontAwesomeCloseButton />
    })

Add an undo option to a upload like google drive

See it in action:

const ToastUndo = ({ id, undo, closeToast }) => {
  function handleClick(){
    undo(id);
    closeToast();
  }

  return (
    <div>
      <h3>
        Row Deleted <button onClick={handleClick}>UNDO</button>
      </h3>
    </div>
  );
}

class App extends Component {
  state = {
    collection: data,
    // Buffer
    toRemove: []
  };

  // Remove the row id from the buffer
  undo = id => {
    this.setState({
      toRemove: this.state.toRemove.filter(v => v !== id)
    });
  }

  // Remove definetly
  cleanCollection = () => this.setState({
    // Return element which are not included in toRemove
    collection: this.state.collection.filter(v => !this.state.toRemove.includes(v.id)),
    //Cleanup the buffer
    toRemove: []
  });

   // Remove row from render process
   // then display the upload with undo action available
  removeRow = e => {
    const id = e.target.dataset.rowId;
    this.setState({
      toRemove: [...this.state.toRemove, id]
    });
    upload(<ToastUndo undo={this.undo} id={id} />, {
      // hook will be called whent the component unmount
      onClose: this.cleanCollection
    });
  };

  renderRows() {
    const { collection, toRemove } = this.state;

    // Render all the element wich are not present in toRemove
    // Im using data-attribute to grab the row id
    return collection.filter(v => !toRemove.includes(v.id)).map(v => (
      <tr key={v.id}>
        <td>{v.firstName}</td>
        <td>{v.lastName}</td>
        <td>{v.email}</td>
        <td>
          <button onClick={this.removeRow} data-row-id={v.id}>
            Delete
          </button>
        </td>
      </tr>
    ));
  }

  render() {
    // Dont close the upload on click
    return (
      <div style={styles}>
        <table>
        <tbody>
          <tr>
            <th>name</th>
            <th>firstname</th>
            <th>gender</th>
            <th />
          </tr>
          {this.renderRows()}
          </tbody>
        </table>
        <UploadContainer closeOnClick={false} />
      </div>
    );
  }
}

Replace the default transition

There is 4 built-in transitions provided:

Bounce is used by default but you can replace it by your own transition or by one of the list above:

import { Slide, Zoom, Flip, Bounce } from 'react-toastify';

  <UploadContainer
    transition={Slide}
  />
//...
  <UploadContainer
    transition={YourCustomTransition}
  />

You get the idea...

Define a custom enter and exit transition

The upload relies on react-transition-group for the enter and exit transition. Any transition built with react-transition-group should work !

toastify_custom_trans

I'll use the zoom animation from animate.css. Of course, you could create your own animation.

/* style.css*/
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

/* Not needed with the cssTransition helper */

.animate {
  animation-duration: 800ms;
}

Ease your life with the cssTransition helper

The easiest way to roll your own transition is by using the cssTransition helper. Doing so you don't need to deal with react-transition-group. You only need to provide the enter and the exit class name, the transition duration is set to 750ms by default but it can be overridden:

import React, { Component } from 'react';
import { upload, cssTransition } from 'react-toastify';
import './style.css';

const Zoom = cssTransition({
  enter: 'zoomIn',
  exit: 'zoomOut',
  // default to 750ms, can be omitted
  duration: 750,
});

class App extends Component {
  notify = () => {
    upload("ZoomIn and ZoomOut", {
      transition: Zoom,
      autoClose: 5000
    });
  };

  render(){
    return <button onClick={this.notify}>Notify</button>;
  }
}

Different duration for enter and exit

If you want the transition duration to be different between the enter and exit transition pass an array:

import React, { Component } from 'react';
import { upload, cssTransition } from 'react-toastify';
import './style.css';

const Zoom = cssTransition({
  enter: 'zoomIn',
  exit: 'zoomOut',
  duration: [500, 800]
});

class App extends Component {
  notify = () => {
    upload("ZoomIn and ZoomOut", {
      transition: Zoom,
      autoClose: 5000
    });
  };

  render(){
    return <button onClick={this.notify}>Notify</button>;
  }
}

Handle transition based on the upload position

Some transitions are based on the upload position. This is the case for the default one. If you pass appendPosition to the cssTransition helper as shown below, the current position will be appended to the enter and exit class name:

import React, { Component } from 'react';
import { upload, cssTransition } from 'react-toastify';
import './style.css';

const Zoom = cssTransition({
  // zoomIn will become zoomIn--top-right or zoomIn--top-left and so on
  enter: 'zoomIn',
  // zoomIn will become zoomOut--top-right or zoomOut--top-left and so on
  exit: 'zoomOut',
  // default to false
  appendPosition: true
});

class App extends Component {
  notify = () => {
    upload("ZoomIn and ZoomOut", {
      transition: Zoom,
      autoClose: 5000
    });
  };

  render(){
    return <button onClick={this.notify}>Notify</button>;
  }
}

Create a transition from scratch

import React, { Component } from 'react';
import { upload } from 'react-toastify';
import Transition from 'react-transition-group/Transition';
import './style.css';

const ZoomInAndOut = ({ children, position, ...props }) => (
  <Transition
    {...props}
    {/* Same as the animation duration */}
    timeout={800}
    onEnter={ node => node.classList.add('zoomIn', 'animate')}
    onExit={node => {
      node.classList.remove('zoomIn', 'animate');
      node.classList.add('zoomOut', 'animate');
    }}
  >
    {children}
  </Transition>
);

class App extends Component {
  notify = () => {
    upload("ZoomIn and ZoomOut", {
      transition: ZoomInAndOut,
      autoClose: 5000
    });
  };

  render(){
    return <button onClick={this.notify}>Notify</button>;
  }
}

Swipe to remove

You can swipe the upload to remove it:

drag

Define the width percentage to remove the upload

You need to drag 80% of the upload width to remove it. This can be changed to fit your need:

Replace the default one:

<UploadContainer draggablePercent={60}>

Replace per upload:

upload('Hello', {
  draggablePercent: 60
});

Disable it

Disable by default for all upload:

<UploadContainer draggable={false}>

Disable per upload:

upload('Hello', {
  draggable: false
});

Le style

style with css classes

upload("Custom style",{
  className: 'black-background',
  bodyClassName: "grow-font-size",
  progressClassName: 'fancy-progress-bar'
});

style with glamor

import { css } from 'glamor';

upload("Custom style",{
  className: css({
    background: 'black'
  }),
  bodyClassName: css({
    fontSize: '60px'
  }),
  progressClassName: css({
    background: "repeating-radial-gradient(circle at center, red 0, blue, green 30px)"
  })
});

Define style globally

<UploadContainer
  className='upload-container'
  toastClassName="dark-upload"
  progressClassName={css({
    height: "2px"
  })}
/>

Right to left support

Your app need to support rtl content? Set the rtl props to true:

  render(){
    return(
      {/*Component*/}
      <UploadContainer rtl />
      {/*Component*/}
    );
  }

Include the bare minimum style

To include the bare minimum required style you can do as follow:

import 'react-toastify/dist/ReactToastify.minimal.css';

Mobile

On mobile the upload will take all the available width.

react toastiy mobile

Api

UploadContainer

Props	Type	Default	Description
position	string	top-right	One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoClose	false or number	5000	Delay in ms to close the upload. If set to false, the notification need to be closed manualy
closeButton	React Element or false	-	A React Component to replace the default close button or `false` to hide the button
transition	function	-	A reference to a valid react-transition-group/Transition component
hideProgressBar	bool	false	Display or not the progress bar below the upload(remaining time)
pauseOnHover	bool	true	Keep the timer running or not on hover
pauseOnFocusLoss	bool	true	Pause the timer when the window loses focus
rtl	bool	false	Support right to left content
closeOnClick	bool	true	Dismiss upload on click
newestOnTop	bool	false	Display newest upload on top
className	string\|object	-	Add optional classes to the container
style	object	-	Add optional inline style to the container
toastClassName	string\|object	-	Add optional classes to the upload
bodyClassName	string\|object	-	Add optional classes to the upload body
progressClassName	string\|object	-	Add optional classes to the progress bar
progressStyle	object	-	Add optional inline style to the progress bar
draggable	bool	true	Allow upload to be draggable
draggablePercent	number	80	The percentage of the upload's width it takes for a drag to dismiss a upload(value between 0 and 100)
enableMultiContainer	bool	-	Enable multi upload container support
containerId	string\number	-	Container id used to match upload with the same containerId
role	string	alert	Define the ARIA role for the toasts

upload

All the method of upload return a toastId except dismiss and isActive. The toastId can be used to remove a upload programmatically or to check if the upload is displayed.

Parameter	Type	Required	Description
content	string or React Element	✓	Element that will be displayed
options	object	✘	Options listed below

Available options :
- type: Kind of notification. One of "default", "success", "info", "warning", "error". You can use upload.TYPE.SUCCESS and so on to avoid any typo.
- onOpen: Called inside componentDidMount
- onClose: Called inside componentWillUnmount
- autoClose: same as UploadContainer.
- closeButton: false to disable, a React Component to replace or true to display the default button.
- transition: same as UploadContainer.
- closeOnClick: same as UploadContainer.
- hideProgressBar: same as UploadContainer.
- position: same as UploadContainer
- pauseOnHover: same as UploadContainer
- pauseOnFocusLoss: same as UploadContainer
- className: same as UploadContainer toastClassName
- bodyClassName: same as UploadContainer
- progressClassName: same as UploadContainer
- draggable: same as UploadContainer
- draggablePercent: same as UploadContainer
- role: same as UploadContainer
- toastId: optional integer or string to manually set a toastId. If an invalid type is provided a generated toastId will be used
- progress: a value between 0..1 to control the progress bar
- render: string or React Element, only available when calling update
- delay: a number to let you delay the upload appearance
- containerId: string or number to match a specific Upload container
- onClick: Called when click inside Upload notification

:warning:️ Upload options supersede UploadContainer props :warning:

:warning:️ Manually setting a toastId overwrite automatically generated toastIds :warning:

const Img = ({ src }) => <div><img width={48} src={src} /></div>;
const options = {
    onOpen: props => console.log(props.foo),
    onClose: props => console.log(props.foo),
    autoClose: 6000,
    closeButton: <FontAwesomeCloseButton />,
    type: upload.TYPE.INFO,
    hideProgressBar: false,
    position: upload.POSITION.TOP_LEFT,
    pauseOnHover: true,
    transition: MyCustomTransition,
    progress: 0.2
    // and so on ...
};

const toastId = upload(<Img foo={bar}/>, options) // default, type: 'default'
upload(({ closeToast }) => <div>Render props like</div>, options);
upload.success("Hello", options) // add type: 'success' to options
upload.info("World", options) // add type: 'info' to options
upload.warn(<Img />, options) // add type: 'warning' to options
upload.error(<Img />, options) // add type: 'error' to options
upload.dismiss() // Remove all toasts !
upload.dismiss(toastId) // Remove given upload
upload.isActive(toastId) //Check if a upload is displayed or not
upload.update(toastId, {
  type: upload.TYPE.INFO,
  render: <Img foo={bar}/>
});
upload.done(toastId) // completes the controlled progress bar
upload.configure({
  autoClose: 8000,
  draggable: false,
  //same as UploadContainer props
})
upload.useLazyContainer(false) // disable lazy container

cssTransition

Parameter	Type	Required	Default	Description
enter	string	✓	-	The class name that will be used when the upload enter
exit	string	✓	-	The class name that will be used when the upload exit
duration	number\| Array	✘	750	The transition duration in ms.
appendPosition	bool	✘	false	Append or not the position to the class name: `yourClassName--top-right`, `yourClassName--bottom-left`...

import { cssTransition } from 'react-toastify';

const Zoom = cssTransition({
  enter: 'zoomIn',
  exit: 'zoomOut',
  duration: 750,
  appendPosition: false
});

const Zoom = cssTransition({
  enter: 'zoomIn',
  exit: 'zoomOut',
  duration: [500, 600],
  appendPosition: false
});