Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mkarusell opened this issue Dec 22, 2023 · 4 comments
Open

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

mkarusell opened this issue Dec 22, 2023 · 4 comments

Comments

@mkarusell
Copy link

mkarusell commented Dec 22, 2023

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
Copy link
Owner

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

@busticated
Copy link

busticated commented Feb 7, 2024

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
Copy link

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

@JoeGaffney
Copy link

Noticing the same behaviour very inconvenient

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants