notistack The global settings on the provider doesn't work

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.

Dec 22 '23 08:12 mkarusell

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

Dec 26 '23 18:12 iamhosseindhv

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: [email protected], @mui/[email protected], [email protected], [email protected]