Skip to main content

Drag to remove

You can drag the toast to remove it. By default, the notifications are only draggable on touch devices.

drag

Define the width percentage to remove the toast​

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

  • Replace the default one:
<ToastContainer draggablePercent={60} />
  • Replace per toast:
toast('Hello', {
  draggablePercent: 60
});

Enable only on desktop​

  • Gloablly
<ToastContainer draggable="mouse" />
  • Per toast:
toast('Hello', {
  draggable: "mouse"
});

Enable on all devices​

  • Gloablly
<ToastContainer draggable />
  • per toast:
toast('Hello', {
  draggable: true
});

Disable it​

  • Globally
<ToastContainer draggable={false} />
  • Per toast:
toast('Hello', {
  draggable: false
});

Drag vertically​

If you want the notification to be draggable vertically instead of horizontally this is possible as well