notistack#SnackbarProvider JavaScript Examples

The following examples show how to use notistack#SnackbarProvider. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: CustomSnackbarProvider.component.js From akashlytics-deploy with GNU General Public License v3.0

6 votes

CustomSnackbarProvider = ({ children }) => {
  const notistackRef = useRef();
  const classes = useStyles();
  const onClickDismiss = (key) => () => {
    notistackRef.current.closeSnackbar(key);
  };

  return (
    <SnackbarProvider
      maxSnack={3}
      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      ref={notistackRef}
      classes={{
        containerRoot: classes.root,
        variantSuccess: classes.success,
        variantError: classes.error,
        variantWarning: classes.warning,
        variantInfo: classes.info
      }}
      hideIconVariant
      action={(key) => (
        <Box width="2rem">
          <IconButton onClick={onClickDismiss(key)} size="small" className={classes.action}>
            <CloseIcon fontSize="small" />
          </IconButton>
        </Box>
      )}
    >
      {children}
    </SnackbarProvider>
  );
}

Example #2

Source File: App.js From Alternative-Uniswap-Interface with GNU General Public License v3.0

6 votes

App = () => {
  return (
    <div className="App">
      <SnackbarProvider maxSnack={3}>
        <ThemeProvider theme={theme}>
          <Web3Provider
            render={(network) => (
              <div>
                <NarBar />
                <Route exact path="/Alternative-Uniswap-Interface/">
                  <CoinSwapper network={network} />
                </Route>

                <Route exact path="/Alternative-Uniswap-Interface/liquidity">
                  <Liquidity network={network} />
                </Route>
              </div>
            )}
          ></Web3Provider>
        </ThemeProvider>
      </SnackbarProvider>
    </div>
  );
}

Example #3

Source File: app.js From bhanwari-devi-archive with GNU General Public License v3.0

6 votes

App = () => (
  <Provider store={store}>
  <MuiThemeProvider theme={theme}>
    <SnackbarProvider maxSnack={1}>
      <Providers />
    </SnackbarProvider>
  </MuiThemeProvider>
  </Provider>
)

Example #4

Source File: index.js From react-ui-builder-editor with GNU General Public License v3.0

6 votes

clearConsoleErrors().then(() => {
  const theme = createMuiTheme({
    typography: {
      useNextVariants: true,
      fontFamily: ['"Roboto"', 'sans-serif'],
      fontSize: 13,
      htmlFontSize: 16,
    }
  });

  window.addEventListener('contextmenu', (e) => {
    if (e) {
      e.stopPropagation();
      e.preventDefault();
    }
  }, true);

  ReactDOM.render(
    <MuiThemeProvider theme={theme}>
      <SnackbarProvider
        maxSnack={3}
        action={[
          <IconButton key="actionButton">
            <Close fontSize="small" color="disabled" />
          </IconButton>
        ]}
      >
        <App />
      </SnackbarProvider>
    </MuiThemeProvider>,
    document.getElementById('root')
  );
});

Example #5

Source File: index.js From chromeless with Mozilla Public License 2.0

6 votes

SnackbarTrigger = ({ classes }) => {
  const notistackRef = React.createRef();
  const onClickDismiss = (key) => () => {
    notistackRef.current.closeSnackbar(key);
  };

  return (
    <SnackbarProvider
      ref={notistackRef}
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      dense
      preventDuplicate
      classes={{
        containerRoot: classes.notistackContainerRoot,
      }}
      action={(key) => (
        <Button color="inherit" onClick={onClickDismiss(key)}>
          Dismiss
        </Button>
      )}
    >
      <Inner />
    </SnackbarProvider>
  );
}

Example #6

Source File: index.js From neutron with Mozilla Public License 2.0

6 votes

SnackbarTrigger = () => {
  const notistackRef = useRef(null);
  const action = useCallback((key) => {
    const onClickDismiss = () => {
      notistackRef.current.closeSnackbar(key);
    };

    return (
      <Button color="inherit" onClick={onClickDismiss}>
        Dismiss
      </Button>
    );
  }, [notistackRef]);

  return (
    <SnackbarProvider
      ref={notistackRef}
      maxSnack={3}
      autoHideDuration={2000}
      anchorOrigin={{
        vertical: 'top',
        horizontal: 'right',
      }}
      dense
      preventDuplicate
      sx={{ mt: 1 }}
      action={action}
    >
      <Inner />
    </SnackbarProvider>
  );
}

Example #7

Source File: index.js From ltijs-demo-client with Apache License 2.0

5 votes

ReactDOM.render(<SnackbarProvider
  maxSnack={3}
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'center'
  }}
                ><App />
</SnackbarProvider>, document.getElementById('root'))

Example #8

Source File: App.js From react-redux-jsonplaceholder with MIT License

5 votes

function App() {
  return (
    <SnackbarProvider dense maxSnack={3}>
      <Router>{renderRoutes(routes)}</Router>
    </SnackbarProvider>
  );
}

Example #9

Source File: _app.js From nextjs-todo-list with MIT License

5 votes

function App({ Component, classes, pageProps }) {
  const firebase = new Firebase();

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
    async function verifyAuthUser() {
      auth.onAuthStateChanged(async (authUser) => {
        if (authUser && analytics) {
          analytics.setUserId(authUser.uid);
        }
      });
    }
    verifyAuthUser();
  }, []);

  return (
    <>
      <AuthContext.Provider>
        <FirebaseContext.Provider value={firebase}>
          <SnackbarProvider
            preventDuplicate
            elevation={0}
            classes={{
              root: classes.snack,
              variantSuccess: classes.success,
              variantError: classes.error,
              variantWarning: classes.warning,
              variantInfo: classes.info,
            }}
            anchorOrigin={{
              vertical: 'bottom',
              horizontal: 'right',
            }}
            maxSnack={3}
          >
            <ThemeProvider theme={materialUITheme}>
              <Component {...pageProps} />
            </ThemeProvider>
          </SnackbarProvider>
          <style jsx global>
            {nprogressStyles}
          </style>
          <style jsx global>
            {globalTheme}
          </style>
        </FirebaseContext.Provider>
      </AuthContext.Provider>
      <CssBaseline />
    </>
  );
}

Example #10

Source File: App.js From spl-token-wallet with Apache License 2.0

5 votes

export default function App() {
  // TODO: add toggle for dark mode
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const theme = React.useMemo(
    () =>
      createMuiTheme({
        palette: {
          type: prefersDarkMode ? 'dark' : 'light',
          primary: blue,
        },
        // TODO consolidate popup dimensions
        ext: '450',
      }),
    [prefersDarkMode],
  );

  // Disallow rendering inside an iframe to prevent clickjacking.
  if (window.self !== window.top) {
    return null;
  }

  let appElement = (
    <NavigationFrame>
      <Suspense fallback={<LoadingIndicator />}>
        <PageContents />
      </Suspense>
    </NavigationFrame>
  );

  if (isExtension) {
    appElement = (
      <ConnectedWalletsProvider>
        <PageProvider>{appElement}</PageProvider>
      </ConnectedWalletsProvider>
    );
  }

  return (
    <Suspense fallback={<LoadingIndicator />}>
      <ThemeProvider theme={theme}>
        <CssBaseline />

        <ConnectionProvider>
          <TokenRegistryProvider>
            <SnackbarProvider maxSnack={5} autoHideDuration={8000}>
              <WalletProvider>{appElement}</WalletProvider>
            </SnackbarProvider>
          </TokenRegistryProvider>
        </ConnectionProvider>
      </ThemeProvider>
    </Suspense>
  );
}

Example #11

Source File: StackedSnackbar.jsx From matx-react with MIT License

5 votes

export default function IntegrationNotistack() {
  return (
    <SnackbarProvider maxSnack={3}>
      <StackedSnackbar />
    </SnackbarProvider>
  );
}

Example #12

Source File: App.js From management-center with Apache License 2.0

4 votes

export default function App(props) {
	// const { window } = props;
	const classes = useStyles();
	const theme = useTheme();
	const [open, setOpen] = React.useState(false);
	const [showTour, setShowTour] = React.useState(false);
	const [value, setValue] = React.useState('recents');
	const [darkMode, setDarkMode] = useLocalStorage('cedalo.managementcenter.darkMode');

	const [response, loading, hasError] = useFetch(`${process.env.PUBLIC_URL}/api/theme`);
	const [responseConfig, loadingConfig, hasErrorConfig] = useFetch(`${process.env.PUBLIC_URL}/api/config`);

	if ((hasError || response) && (hasErrorConfig || responseConfig)) {
		let appliedTheme = darkMode === 'true' ? darkTheme : customTheme;
		let hideConnections = (typeof responseConfig?.hideConnections === 'boolean') ? responseConfig?.hideConnections : false;
		let hideInfoPage = (typeof responseConfig?.hideInfoPage === 'boolean') ? responseConfig?.hideInfoPage : false;
		let hideLogoutButton = (typeof responseConfig?.hideLogoutButton === 'boolean') ? responseConfig?.hideLogoutButton : false;
		let hideProfileButton = (typeof responseConfig?.hideProfileButton === 'boolean') ? responseConfig?.hideProfileButton : false;
		const onChangeTheme = () => {
			setDarkMode(darkMode === 'true' ? 'false' : 'true');
		};

		const handleStartTour = () => {
			setOpen(true);
			setShowTour(true);
		};

		if (response) {
			customTheme.palette.primary.main = response?.light?.palette?.primary?.main;
			customTheme.palette.secondary.main = response?.light?.palette?.secondary?.main;
			darkTheme.palette.primary.main = response?.dark?.palette?.primary?.main;
			darkTheme.palette.secondary.main = response?.dark?.palette?.secondary?.main;
			if (response?.dark?.palette?.background?.default) {
				darkTheme.palette.background.default = response?.dark?.palette?.background?.default;
			}
			if (response?.dark?.palette?.background?.paper) {
				darkTheme.palette.background.paper = response?.dark?.palette?.background?.paper;
			}
			if (response?.dark?.palette?.text) {
				darkTheme.palette.text.primary = response?.dark?.palette?.text?.primary;
			}
			if (response?.dark?.palette?.tables) {
				darkTheme.palette.tables = response?.dark?.palette?.tables;
			}
			if (response?.dark?.palette?.dashboard) {
				darkTheme.palette.dashboard = response?.dark?.palette?.dashboard;
			}
			if (response?.light?.palette?.dashboardIcons) {
				customTheme.palette.dashboard = response?.light?.palette?.dashboard;
			}
			if (response?.dark?.palette?.drawer) {
				darkTheme.palette.drawer = response?.dark?.palette?.drawer;
			}
		}

		const onTourStateChange = (event) => {
			if (event.action === 'close' || event.action === 'reset') {
				// TODO: this is a hack to prevent the
				// strange main menu behavior when the
				// in app tour selects the menu items
				window.location.reload();
			}
		};

		const handleChange = (event, newValue) => {
			setValue(newValue);
		};

		const handleDrawerOpen = () => {
			setOpen(true);
		};

		const handleDrawerClose = () => {
			setOpen(false);
		};

		//   const container = window !== undefined ? () => window().document.body : undefined;

		return (
			<ThemeProvider theme={appliedTheme}>
				<SnackbarProvider>
				<Joyride
					run={showTour}
					continuous={true}
					//   getHelpers={this.getHelpers}
					scrollToFirstStep={true}
					showProgress={true}
					showSkipButton={true}
					steps={steps}
					callback={onTourStateChange}
					styles={{
						options: {
							zIndex: 5000
						}
					}}
				/>
				<ConfirmProvider>
					<CssBaseline />
					<Router basename={process.env.PUBLIC_URL}>
						<Provider store={store}>
							<WebSocketProvider>
								<div className={classes.root}>
									<NewsletterPopup />
									<OnBoardingDialog />
									<Switch>
										<Route path="/login">
											<AppBar
												position="fixed"
												className={clsx(classes.appBar, {
													[classes.appBarShift]: open
												})}
											>
												<Toolbar>
													<Typography variant="h6" noWrap></Typography>
												</Toolbar>
											</AppBar>
											{/* <Container className={classes.container}>
					<Login />
				  </Container> */}
										</Route>
										<Route path="/">
											<AppBar
												position="fixed"
												className={clsx(classes.appBar, {
													[classes.appBarShift]: open
												})}
											>
												<Toolbar>
													<IconButton
														color="inherit"
														aria-label="open drawer"
														onClick={handleDrawerOpen}
														edge="start"
														className={clsx(classes.menuButton, {
															[classes.hide]: open
														})}
													>
														<MenuIcon />
													</IconButton>
													<Typography noWrap>
														<img
															className={clsx(classes.logo)}
															src={
																darkMode === 'true'
																	? response?.dark?.logo?.path || file
																	: response?.light?.logo?.path || file
															}
															style={
																response?.light?.logo?.height &&
																response?.light?.logo?.width && {
																	height: response?.light?.logo?.height,
																	width: response?.light?.logo?.width
																}
															}
														/>
													</Typography>
													<section className={classes.rightToolbar}>
														<BrokerSelect />
														<Tooltip title="Switch mode">
															<IconButton
																edge="end"
																aria-label="Theme Mode"
																aria-controls="theme-mode"
																aria-haspopup="true"
																onClick={() => onChangeTheme()}
																color="inherit"
																className={classes.toolbarButton}
															>
																<ThemeModeIcon fontSize="small" />
															</IconButton>
														</Tooltip>
														{ !hideInfoPage ? <InfoButton /> : null }
														<Tooltip title="Start tour">
															<IconButton
																edge="end"
																aria-label="Tour"
																aria-controls="tour"
																aria-haspopup="true"
																onClick={() => handleStartTour()}
																color="inherit"
																className={classes.toolbarButton}
															>
																<TourIcon fontSize="small" />
															</IconButton>
														</Tooltip>

														{ !hideProfileButton ? <ProfileButton /> : null }
														{ !hideLogoutButton ? <LogoutButton /> : null }

														{/* <IconButton
						  edge="end"
						  aria-label="Notifications"
						  aria-controls="notifications"
						  aria-haspopup="true"
						  // onClick={() => setDarkMode(!darkMode)}
						  color="inherit"
						  className={classes.toolbarButton}
						  >
							  <NotificationsIcon />
						  </IconButton> */}
													</section>
												</Toolbar>
											</AppBar>
											{/* <NewsDrawer /> */}

											<nav>
												{/* <Hidden xsDown implementation="css"> */}
												<CustomDrawer hideConnections={hideConnections} open={open} handleDrawerOpen={handleDrawerOpen} handleDrawerClose={handleDrawerClose} />
											</nav>
											<LicenseErrorDialog />
											<DisconnectedDialog />

											<Container className={classes.container}>											
												<AppRoutes />
											</Container>
										</Route>
									</Switch>
								</div>
							</WebSocketProvider>
						</Provider>
					</Router>
				</ConfirmProvider>
				</SnackbarProvider>
			</ThemeProvider>
		);
	} else {
		return null;
	}
}