notistack SnackbarProvider TypeScript Examples

Source File: _app.tsx From bouncecode-cms with GNU General Public License v3.0

6 votes

function MyApp(props) {
  const {Component, pageProps, req} = props;
  const getLayout = Component.getLayout ?? (page => page);
  const apolloClient = useApollo(pageProps, req);

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>BounceCode CMS</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <ApolloProvider client={apolloClient}>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <PageLoading />
          <SnackbarProvider>
            {getLayout(<Component {...pageProps} />)}
          </SnackbarProvider>
        </ThemeProvider>
      </ApolloProvider>
    </React.Fragment>
  );
}

Source File: App.tsx From Search-Next with GNU General Public License v3.0

6 votes

function App(props: any) {
  return (
    <div className="App">
      <Suspense fallback={<GlobalLoading />}>
        <SnackbarProvider
          maxSnack={1}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'center',
          }}
        >
          <HashRouter>
            <Routes>{Recursive(routers)}</Routes>
          </HashRouter>
        </SnackbarProvider>
      </Suspense>
      <ToastContainer />
    </div>
  );
}

Source File: Theme.tsx From wallet-adapter with Apache License 2.0

6 votes

Theme: FC<{ children: ReactNode }> = ({ children }) => {
    return (
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
                <SnackbarProvider>{children}</SnackbarProvider>
            </ThemeProvider>
        </StyledEngineProvider>
    );
}

Source File: ContextProvider.tsx From wallet-adapter with Apache License 2.0

6 votes

ContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
    return (
        <StyledEngineProvider injectFirst>
            <ThemeProvider theme={theme}>
                <SnackbarProvider>
                    <AutoConnectProvider>
                        <WalletContextProvider>{children}</WalletContextProvider>
                    </AutoConnectProvider>
                </SnackbarProvider>
            </ThemeProvider>
        </StyledEngineProvider>
    );
}

Source File: App.tsx From swap-ui with Apache License 2.0

6 votes

// App illustrating the use of the Swap component.
//
// One needs to just provide an Anchor `Provider` and a `TokenListContainer`
// to the `Swap` component, and then everything else is taken care of.
function App() {
  return (
    <SnackbarProvider maxSnack={5} autoHideDuration={8000}>
      <AppInner />
    </SnackbarProvider>
  );
}

Source File: App.tsx From parity-bridges-ui with GNU General Public License v3.0

6 votes

function App() {
  const { connections } = useConnections([connectionDetails1, connectionDetails2]);

  if (isEmpty(connections)) {
    return (
      <Backdrop open>
        <CircularProgress color="inherit" />
      </Backdrop>
    );
  }

  return (
    <SourceTargetContextProvider connections={connections}>
      <KeyringContextProvider>
        <SubscriptionsContextProvider>
          <GUIContextProvider>
            <ApiCallsContextProvider>
              <AccountContextProvider>
                <MessageContextProvider>
                  <SnackbarProvider>
                    <TransactionContextProvider>
                      <BrowserRouter>
                        <Switch>
                          <Route path={'/'}>
                            <Main />
                          </Route>
                        </Switch>
                      </BrowserRouter>
                    </TransactionContextProvider>
                  </SnackbarProvider>
                </MessageContextProvider>
              </AccountContextProvider>
            </ApiCallsContextProvider>
          </GUIContextProvider>
        </SubscriptionsContextProvider>
      </KeyringContextProvider>
    </SourceTargetContextProvider>
  );
}

Source File: App.tsx From bee-dashboard with BSD 3-Clause "New" or "Revised" License

6 votes

App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => (
  <div className="App">
    <ThemeProvider theme={theme}>
      <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
        <BeeProvider>
          <StampsProvider>
            <FileProvider>
              <FeedsProvider>
                <PlatformProvider>
                  <TopUpProvider>
                    <SnackbarProvider>
                      <Router>
                        <>
                          <CssBaseline />
                          <Dashboard>
                            <BaseRouter />
                          </Dashboard>
                        </>
                      </Router>
                    </SnackbarProvider>
                  </TopUpProvider>
                </PlatformProvider>
              </FeedsProvider>
            </FileProvider>
          </StampsProvider>
        </BeeProvider>
      </SettingsProvider>
    </ThemeProvider>
  </div>
)

Source File: MuiSnackbarProvider.tsx From clearflask with Apache License 2.0

6 votes

MuiSnackbarProvider = (props: {
  children: React.ReactNode;
  notistackRef?: React.RefObject<SnackbarProvider>;
}) => {
  const notistackRef = props.notistackRef || React.createRef<SnackbarProvider>();
  const classes = muiSnackbarStyles();
  return (
    <SnackbarProvider
      classes={{
        root: classes.snackbar,
        variantWarning: classes.standardWarning,
      }}
      ref={notistackRef}
      preventDuplicate
      maxSnack={3}
      hideIconVariant
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      action={key => (
        <IconButton
          className={classes.dismissButton}
          onClick={() => notistackRef.current?.closeSnackbar(key)}
        >
          <DismissIcon fontSize='inherit' />
        </IconButton>
      )}
    >
      {props.children}
    </SnackbarProvider>
  )
}

Source File: index.tsx From akashlytics with GNU General Public License v3.0

6 votes

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <QueryClientProvider client={queryClient}>
        <IntlProvider locale={navigator.language}>
          <HelmetProvider>
            <SnackbarProvider maxSnack={3} dense hideIconVariant>
              <MediaQueryProvider>
                <Router>
                  <ScrollToTop />
                  <App />
                </Router>
              </MediaQueryProvider>
            </SnackbarProvider>
          </HelmetProvider>
        </IntlProvider>
      </QueryClientProvider>
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Source File: UserTableView.stories.tsx From bouncecode-cms with GNU General Public License v3.0

6 votes

UserTable = () => {
  const data: ITableDataCallback = async query => {
    return {
      data: object('data', [
        {
          id: 1,
          email: '[email protected]',
          isAdmin: true,
          payload: {displayName: '홍길동'},
          createdDate: new Date(),
          updatedDate: new Date(),
        },
      ]),
      page: number('page', 1),
      totalCount: number('totalCount', 100), // TODO: totalCount
    };
  };

  return (
    <SnackbarProvider>
      <UserTableView data={data} />
    </SnackbarProvider>
  );
}

Source File: index.tsx From multi-downloader-nx with MIT License

6 votes

ReactDOM.render(
  <React.StrictMode>
    <ErrorHandler>
      <Store>
        <SnackbarProvider
          ref={notistackRef}
          action={(key) => (
            <IconButton onClick={onClickDismiss(key)} color="inherit">
              <CloseOutlined />
            </IconButton>
          )}
          >
          <Style>
            <MessageChannel>
              <ServiceProvider>
                <App />
              </ServiceProvider>
            </MessageChannel>
          </Style>
        </SnackbarProvider>
      </Store>
    </ErrorHandler>
  </React.StrictMode>,
  document.getElementById('root')
);

Source File: index.tsx From wonderland-frontend with MIT License

6 votes

ReactDOM.render(
    <SnackbarProvider
        maxSnack={4}
        anchorOrigin={{
            vertical: "bottom",
            horizontal: "right",
        }}
        content={(key, message: string) => <SnackMessage id={key} message={JSON.parse(message)} />}
        autoHideDuration={10000}
    >
        <Provider store={store}>
            <Web3ContextProvider>
                <Root />
            </Web3ContextProvider>
        </Provider>
    </SnackbarProvider>,
    document.getElementById("root"),
);

Source File: test.moun.helper.tsx From frontend with Apache License 2.0

6 votes

mountVrtComponent = ({
  component,
  memoryRouterProps = {
    initialEntries: ["/"],
  },
  path = "/",
}: {
  component: React.ReactElement;
  memoryRouterProps?: MemoryRouterProps;
  path?: string;
}) =>
  mount(
    <MemoryRouter {...memoryRouterProps}>
      <Routes>
        <Route
          path={path}
          element={
            <SnackbarProvider>
              <UserProvider>
                <ProjectProvider>
                  <BuildProvider>
                    <HelpProvider>
                      <TestRunProvider>{component}</TestRunProvider>
                    </HelpProvider>
                  </BuildProvider>
                </ProjectProvider>
              </UserProvider>
            </SnackbarProvider>
          }
        />
      </Routes>
    </MemoryRouter>,
    {
      cssFiles: ["src/index.css"],
    }
  )

Source File: index.tsx From rugenerous-frontend with MIT License

6 votes

ReactDOM.render(
  <SnackbarProvider
    maxSnack={4}
    anchorOrigin={{
      vertical: "bottom",
      horizontal: "right",
    }}
    content={(key, message: string) => <SnackMessage id={key} message={JSON.parse(message)} />}
    autoHideDuration={10000}
  >
    <Provider store={store}>
      <Web3ContextProvider>
        <Root />
      </Web3ContextProvider>
    </Provider>
  </SnackbarProvider>,
  document.getElementById("root"),
);

Source File: index.tsx From lobis-frontend with MIT License

6 votes

ReactDOM.render(
    <SnackbarProvider
        maxSnack={4}
        anchorOrigin={{
            vertical: "bottom",
            horizontal: "right",
        }}
        content={(key, message: string) => <SnackMessage id={key} message={JSON.parse(message)} />}
        autoHideDuration={3 * 60000}
    >
        <Provider store={store}>
            <Web3ContextProvider>
                <Root />
            </Web3ContextProvider>
        </Provider>
    </SnackbarProvider>,
    document.getElementById("root"),
);

Source File: SignInView.stories.tsx From bouncecode-cms with GNU General Public License v3.0

5 votes

SignIn = () => {
  return (
    <SnackbarProvider>
      <SignInView onSubmit={action('onSubmit')} />
    </SnackbarProvider>
  );
}

Source File: SignUpView.stories.tsx From bouncecode-cms with GNU General Public License v3.0

5 votes

SignUp = () => {
  return (
    <SnackbarProvider>
      <SignUpView onSubmit={action('onSubmit')} />
    </SnackbarProvider>
  );
}

Source File: ResetPasswordView.stories.tsx From bouncecode-cms with GNU General Public License v3.0

5 votes

ResetPassword = () => {
  return (
    <SnackbarProvider>
      <ResetPasswordView onSubmit={action('onSubmit')} />
    </SnackbarProvider>
  );
}

Source File: Main.tsx From clearflask with Apache License 2.0

5 votes

notistackRef = React.createRef<SnackbarProvider>()

Source File: index.tsx From multi-downloader-nx with MIT License

5 votes

notistackRef = React.createRef<SnackbarProvider>()

Source File: App.tsx From homebase-app with MIT License

5 votes

App: React.FC = () => {
  const classes = styles();

  return (
    <ThemeProvider theme={theme}>
      <SnackbarProvider
        classes={{
          variantSuccess: classes.success,
          variantError: classes.error,
          variantInfo: classes.info,
        }}
      >
        <QueryClientProvider client={queryClient}>
          <ActionSheetProvider>
            <Box bgcolor="primary.dark" position="absolute" width="100%">
              <Router>
                <ScrollToTop />
                <Switch>
                  <Route path="/creator">
                    <CreatorProvider>
                      <ThemeProvider theme={legacyTheme}>
                        <DAOCreate />
                      </ThemeProvider>
                    </CreatorProvider>
                    <WarningFooter
                      text={
                        "Homebase is highly experimental, and changes are to be expected in the coming weeks. Please use at your own risk. The DAO you created will not be deprecated."
                      }
                    />
                  </Route>
                  <Route path="/explorer">
                    <TZKTSubscriptionsProvider>
                      <DAOExplorerRouter />
                    </TZKTSubscriptionsProvider>
                    <WarningFooter
                      text={
                        "Homebase is highly experimental, and changes are to be expected in the coming weeks. Please use at your own risk. The DAO you created will not be deprecated."
                      }
                    />
                    <Footer></Footer>
                  </Route>
                  <Route path="/faq">
                    <FAQ />
                  </Route>
                  <Route path="/">
                    <Landing />
                  </Route>
                  <Redirect to="/" />
                </Switch>
              </Router>
            </Box>
          </ActionSheetProvider>
        </QueryClientProvider>
      </SnackbarProvider>
    </ThemeProvider>
  );
}

Source File: App.tsx From shadowsocks-electron with GNU General Public License v3.0

5 votes

App: React.FC = () => {
  const styles = useStyles();
  const darkMode = persistStore.get('darkMode') === 'true';
  const [theme] = useTheme(darkMode ? 'dark' : 'light');

  useEffect(() => {
    getConnectionStatus((status) => {
      store.dispatch({
        type: SET_STATUS,
        key: "connected",
        value: status
      });
    });

    MessageChannel.invoke('main', 'service:desktop', {
      action: 'setLocale',
      params: getFirstLanguage(persistStore.get('lang') as string)
    });
  }, []);

  return (
    <Provider store={store}>
      <PersistGate loading={<Loading />} persistor={persistor}>
        <ThemeProvider theme={theme}>
          <SnackbarProvider
            maxSnack={3}
            anchorOrigin={ {horizontal: 'center', vertical: 'top'} }
            autoHideDuration={2e3}
          >
            <HashRouter>
              <div className={styles.root}>
                <CssBaseline />
                <AppNav />
                <main className={styles.content}>
                  <div className={styles.toolbar} />
                  <RouterComp />
                </main>
              </div>
            </HashRouter>
          </SnackbarProvider>
        </ThemeProvider>
      </PersistGate>
    </Provider>
  );
}

Source File: NotificationProvider.tsx From Teyvat.moe with GNU General Public License v3.0

5 votes

NotificationProvider: FunctionComponent<NotificationProviderProps> = ({
  children,
}) => (
  <SnackbarProvider>
    <NotificationHandler />
    {children}
  </SnackbarProvider>
)

Source File: Notifications.tsx From react-pwa with MIT License

5 votes

function Notifications() {
  return (
    <SnackbarProvider maxSnack={notifications.maxSnack}>
      <Notifier />
    </SnackbarProvider>
  );
}

Source File: App.tsx From abacus with GNU General Public License v2.0

5 votes

function App(): JSX.Element {
  debug('App#render')
  const classes = useStyles()

  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles)
    }
  }, [])

  if (config.experimentApi.needsAuth && window.location.pathname !== '/auth') {
    // Prompt user for authorization if we don't have auth info.
    const experimentsAuthInfo = getExperimentsAuthInfo()
    if (!experimentsAuthInfo) {
      const authQuery = {
        client_id: config.experimentApi.authClientId,
        redirect_uri: `${window.location.origin}/auth?redirect_to=${encodeURIComponent(window.location.href)}`,
        response_type: 'token',
        scope: 'global',
      }

      const authUrl = `${config.experimentApi.authPath}?${qs.stringify(authQuery)}`
      window.location.replace(authUrl)
    }
  }

  return (
    <RenderErrorBoundary>
      {({ renderError }) => (
        <ThemeProvider>
          {renderError ? (
            <RenderErrorView renderError={renderError} />
          ) : (
            <SnackbarProvider preventDuplicate>
              <div className={classes.app}>
                <Routes />
              </div>
            </SnackbarProvider>
          )}
        </ThemeProvider>
      )}
    </RenderErrorBoundary>
  )
}

Source File: index.tsx From multisig-react with MIT License

4 votes

App: React.FC = ({ children }) => {
  const classes = useStyles()
  const currentNetwork = useSelector(networkSelector)
  const isWrongNetwork = currentNetwork !== HARMONY_NETWORK.UNKNOWN && currentNetwork !== desiredNetwork
  const { toggleSidebar } = useContext(SafeListSidebarContext)
  const matchSafe = useRouteMatch({ path: `${SAFELIST_ADDRESS}`, strict: false })
  const history = useHistory()
  const safeAddress = useSelector(safeParamAddressFromStateSelector)
  const safeName = useSelector(safeNameSelector) ?? ''
  const { safeActionsState, onShow, onHide, showSendFunds, hideSendFunds } = useSafeActions()
  const currentSafeBalance = useSelector(safeFiatBalancesTotalSelector)
  const currentCurrency = useSelector(currentCurrencySelector)
  const granted = useSelector(grantedSelector)
  const sidebarItems = useSidebarItems()

  const safeLoaded = useLoadSafe(safeAddress)
  useSafeScheduledUpdates(safeLoaded, safeAddress)

  const sendFunds = safeActionsState.sendFunds
  const formattedTotalBalance = currentSafeBalance ? formatAmountInUsFormat(currentSafeBalance) : ''
  const balance =
    !!formattedTotalBalance && !!currentCurrency ? `${formattedTotalBalance} ${currentCurrency}` : undefined

  useEffect(() => {
    if (matchSafe?.isExact) {
      history.push(WELCOME_ADDRESS)
      return
    }
  }, [matchSafe, history])

  const onReceiveShow = () => onShow('Receive')
  const onReceiveHide = () => onHide('Receive')

  return (
    <Frame>
      <Backdrop isOpen={isWrongNetwork} />
      <SnackbarProvider
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        classes={{
          variantSuccess: classes.success,
          variantError: classes.error,
          variantWarning: classes.warning,
          variantInfo: classes.info,
        }}
        iconVariant={{
          error: <Img alt="Error" src={ErrorIcon} />,
          info: <Img alt="Info" src={InfoIcon} />,
          success: <Img alt="Success" src={CheckIcon} />,
          warning: <Img alt="Warning" src={AlertIcon} />,
        }}
        maxSnack={5}
      >
        <>
          <Notifier />

          <AppLayout
            sidebarItems={sidebarItems}
            safeAddress={safeAddress}
            safeName={safeName}
            balance={balance}
            granted={granted}
            onToggleSafeList={toggleSidebar}
            onReceiveClick={onReceiveShow}
            onNewTransactionClick={() => showSendFunds('')}
          >
            {children}
          </AppLayout>

          <SendModal
            activeScreenType="chooseTxType"
            isOpen={sendFunds.isOpen}
            onClose={hideSendFunds}
            selectedToken={sendFunds.selectedToken}
          />

          {safeAddress && safeName && (
            <Modal
              description="Receive Tokens Form"
              handleClose={onReceiveHide}
              open={safeActionsState.showReceive}
              paperClassName={classes.receiveModal}
              title="Receive Tokens"
            >
              <ReceiveModal onClose={onReceiveHide} safeAddress={safeAddress} safeName={safeName} />
            </Modal>
          )}
        </>
      </SnackbarProvider>
    </Frame>
  )
}

notistack#SnackbarProvider TypeScript Examples