ReactToastify position not working in React

Question

toastify/dist/ReactToastify.css` and I can't manage the Toast to show in the bottom right. I'm using the exact code as the documentation. But it's not working

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; 
toast.configure();

function myComponent () {
   
   ...
   const submit = () => {
       toast.success('Your Message was sent to Wasfa Team', { poistion: toast.POSITION.BOTTOM_RIGHT });
   }
   ...
   return (
     ...
     <ToastContainer />
   )
}

score 2 · Answer 1 · answered Aug 02 '21 at 06:50

just use the position

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; 
toast.configure();

function myComponent () {
   
   ...
   const submit = () => {
       toast.success('Your Message was sent to Wasfa Team', { poistion: "bottom-right" });
   }
   ...
   return (
     ...
     <ToastContainer />
   )
}

score 1 · Answer 2 · answered Aug 02 '21 at 06:49

1

Just set position attribute

   <ToastContainer position="bottom-right"/>

answered Aug 02 '21 at 06:49

Ahmad

816
2
9
15

score 1 · Accepted Answer · answered Aug 02 '21 at 06:49

1

You have to define the position as a prop on ToastContainer

<ToastContainer position="bottom-right" />

answered Aug 02 '21 at 06:49

Bilal Hussain

572
6
14

ReactToastify position not working in React

3 Answers3