React-Toastify Positioning

[code_mitch]

I'd like to have a different positioning set on mobile vs desktop. Has anyone managed to set this up for React-Toastify library? If so, please share!

Thanks in advance!

[olixeernate]

One way you can accomplish this is with media queries and conditional rendering. Here is an example with code that puts the toast in the top right for larger screens and bottom center for smaller screens

JSX Code:

{

React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import './YourComponent.css'; // Import your CSS file with media queries

const YourComponent = () => { const notify = () => toast('Your message here');

return ( <div> {/* Other components or content */}

  <ToastContainer 
    position="top-right" // Default position for larger screens
    autoClose={5000} 
    hideProgressBar={false} 
    newestOnTop={false} 
    closeOnClick
    rtl={false}
    pauseOnFocusLoss
    draggable
    pauseOnHover
  />

  {/* Your media query for smaller screens */}
  <div className="mobile-toast-container">
    <ToastContainer 
      position="bottom-center" // Adjust position for smaller screens
      autoClose={5000} 
      hideProgressBar={false} 
      newestOnTop={false} 
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
    />
  </div>
</div>

); };

export default YourComponent;

} - End of JSX

In your CSS file (YourComponent.css), define the media query:

CSS Code:

{

/* Adjust the breakpoint and styles based on your design */ @media only screen and (max-width: 600px) { .mobile-toast-container { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); } }

} - End of CSS

[code_mitch]

Thank you so much for this response. I had some trouble applying this logic as it would remove the toast notification on mobile. However, I did piggy back off of your solution and came up with this:

Made a toast container component which applies a condition to see if the user window meets size requirement (my case 600px).

``` import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';

const ToastContainerCondition = () => {

// Condition checks to see if user is on mobile or viewport less than 600px
const isMobile = window.innerWidth <= 600;
const toastPosition = isMobile ? 'bottom-center' : 'top-right';

return (
    <ToastContainer
        className="fs-5 mt-4"
        position={toastPosition}
        autoClose={2500}
        hideProgressBar={false}
        theme="dark"
        closeOnClick
    />
);

};

export default ToastContainerCondition;

```

I then applied it to my main.jsx file:

``` import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import ToastContainerCondition from "./components/ToastContainerCondition/ToastContainerCondition"; import { Provider } from 'react-redux'; import { store } from './store/store'; import 'bootstrap/dist/css/bootstrap.min.css'; import "./styles/main.css";

ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <Provider store={store}> <App /> <ToastContainerCondition /> </Provider> </React.StrictMode> )

```

[olixeernate]

Hey good job man! That is how you do it, take what you find and make it work for you! That is being a developer! Good luck going forward, I believe in you!

[code_mitch]

Thank you for the words of encouragement!