iamhosseindhv / notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other
https://notistack.com
Other
3.89k stars 299 forks source link

The global settings on the provider doesn't work #593

Open mkarusell opened 9 months ago

mkarusell commented 9 months ago

When trying to implement notistack to a new react project I wanted to add global settings/styles to the provider, as I should be able to. But they don't work at all. I can add the same settings to the settings object of the enqueueSnackbar which works.

Expected Behavior

For example:

<SnackbarProvider anchorOrigin={{ vertical: 'bottom', horizontal: 'right', }} >... </SnackbarProvider>

Should make the snackbars appear on the right.

Current Behavior

The settings doesn't do anything when applied to the provider.

Steps to Reproduce

I can't reproduce it in codebox :( It works in the codebox example supplied from notistack.

Your Environment

Tech Version
Notistack ^3.0.1
React 18.2.0
Browser Chrome
etc.
iamhosseindhv commented 9 months ago

Hey @mkarusell - Without a reproduction example it's difficult for me to help.

busticated commented 7 months ago

seeing this as well i think. repro is simply:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { SnackbarProvider, useSnackbar } from 'notistack';
import { MyApp } from './my-app.tsx';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <SnackbarProvider maxSnack={10}>
            <MyApp />
        </SnackbarProvider>
    </React.StrictMode>,
);

// file: './my-app.tsx'
function MyApp() {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    const errors = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];

    React.useEffect(() => {
        const keys = errors.map(e => {
            enqueueSnackbar(e, {
                variant: 'error',
            });
        });

        return () => {
            closeSnackbar(keys);
        }
    }, [errors]);

    return (
        <div>
            <h1>Hello, world!</h1>
        </div>
    );
}

In this case, only 3 snacks are shown, which is the default (docs) but i expected to see all 10 since maxSnack={10}

edit: dependencies: notistack@3.0.1, @mui/material@5.15.4, react@18.2.0, react-dom@18.2.0

firflant commented 7 months ago

Doesn't work for me as well. It ignores my global anchorOrigin setting and that's how i entered this thread

JoeGaffney commented 5 months ago

Noticing the same behaviour very inconvenient