react-toastify ToastContainer TypeScript Examples

Source File: index.tsx From raspiblitz-web with MIT License

6 votes

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <SSEContextProvider>
        <AppContextProvider>
          {/* For persistent toasts over all pages */}
          <ToastContainer />
          <App />
        </AppContextProvider>
      </SSEContextProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Source File: App.tsx From projectboard with MIT License

6 votes

App = () => {
    return (
        <div className="App">
            <Routes />
            <ToastContainer
                position="bottom-right"
                autoClose={5000}
                hideProgressBar
                newestOnTop
                closeOnClick
                rtl={false}
                transition={slideUp}
                pauseOnFocusLoss
                draggable
                pauseOnHover
            />
        </div>
    );
}

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

6 votes

function Container() {
  return (
    <ToastContainer
      position="top-right"
      autoClose={5000}
      hideProgressBar={true}
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss
      draggable
      pauseOnHover
      theme="colored"
    />
  );
}

Source File: index.tsx From resume-builder with MIT License

6 votes

render() {
        const { Component, pageProps } = this.props;
        return (
            <>
                <Head>
                    <title>wtfresume | free resume builder</title>
                    <meta name="description" content="A modern real time design and 100% free resume builder."></meta>
                </Head>
                <Provider store={appStore}>
                    <PersistGate loading={<Component {...pageProps} />} persistor={this.persistor}>
                        <ThemeProvider theme={theme}>
                            <Component {...pageProps} />
                        </ThemeProvider>
                    </PersistGate>
                </Provider>
                <ToastContainer />
            </>
        );
    }

Source File: _app.tsx From kratos-selfservice-ui-react-nextjs with Apache License 2.0

6 votes

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div data-testid="app-react">
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <Component {...pageProps} />
        <ToastContainer />
      </ThemeProvider>
    </div>
  )
}

Source File: _app.tsx From liferay-grow with MIT License

6 votes

App = ({ Component, pageProps }: AppProps): React.ReactElement => {
  const apolloClient = useApollo();

  return (
    <ClayIconSpriteContext.Provider value={spritemap}>
      <ToastContainer position="bottom-left" />

      <AppContextProvider>
        <AppContext.Consumer>
          {() => (
            <ApolloProvider client={apolloClient}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </ApolloProvider>
          )}
        </AppContext.Consumer>
      </AppContextProvider>
    </ClayIconSpriteContext.Provider>
  );
}

Source File: DomApp.tsx From ble with Apache License 2.0

6 votes

DomApp: FunctionComponent = () => {
	return (
		<Fragment>
			<TopStuff>
				<MenuBar/>
				<ToolBar/>
				<ParamsBox/>
			</TopStuff>
			<ZoomButtons/>
			<ToastContainer
				position="bottom-left"
				transition={Zoom} // less distracting
			/>
		</Fragment>
	);
}

Source File: App.tsx From Next.js_GraphQL_Express_Apollo_Boilerplate with MIT License

6 votes

App = () => {
  return (
    <ApolloProvider client={apolloClient}>
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/signup" component={SignUp} />
          <PrivateRoute path="/welcome" component={Welcome} />
          <PrivateRoute path="/users" component={Users} />
          <PrivateRoute path="/update" component={Update} />
          <PrivateRoute path="/subscription" component={Subscription} />
          <Route path="*" component={NoMatch} />
        </Switch>
      </Router>
      <ToastContainer
        position="top-right"
        autoClose={2000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        draggable
        pauseOnHover
      />
    </ApolloProvider>
  );
}

Source File: _app.tsx From Next.js_GraphQL_Express_Apollo_Boilerplate with MIT License

6 votes

render() {
    const { Component, pageProps, apollo } = this.props;
    return (
      <ApolloProvider client={apollo}>
        <Component {...pageProps} />
        <ToastContainer
          position="top-right"
          autoClose={2000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          draggable
          pauseOnHover
        />
      </ApolloProvider>
    );
  }

Source File: _app.tsx From MultiFaucet with GNU Affero General Public License v3.0

6 votes

// Toast notifications

export default function MultiFaucet({ Component, pageProps }: AppProps) {
  return (
    // Wrap app in auth session provider
    <Provider session={pageProps.session}>
      {/* Toast container */}
      <ToastContainer />

      {/* Site */}
      <Component {...pageProps} />
    </Provider>
  );
}

Source File: index.tsx From documentation with MIT License

6 votes

Layout: React.FC<Props> = (props) => {
  const { children, noFooter, wrapperClassName } = props;

  return (
    <LayoutProviders>
      <ToastContainer />

      <LayoutHead {...props} />

      <SkipToContent />

      <AnnouncementBar />

      <Navbar />

      <div className={clsx(styles.Wrapper, wrapperClassName)}>{children}</div>

      {!noFooter && <Footer />}
    </LayoutProviders>
  );
}

Source File: ToolbarApp.tsx From posthog-foss with MIT License

6 votes

export function ToolbarApp(props: ToolbarProps = {}): JSX.Element {
    const { jsURL } = useValues(toolbarLogic(props))

    const shadowRef = useRef<HTMLElementWithShadowRoot | null>(null)
    const [didLoadStyles, setDidLoadStyles] = useState(false)

    // this runs after the shadow root has been added to the dom
    const didRender = useSecondRender(
        props.disableExternalStyles
            ? () => {}
            : () => {
                  const styleLink = document.createElement('link')
                  styleLink.rel = 'stylesheet'
                  styleLink.type = 'text/css'
                  styleLink.href = `${jsURL}/static/toolbar.css`
                  styleLink.onload = () => setDidLoadStyles(true)
                  const shadowRoot =
                      shadowRef.current?.shadowRoot || window.document.getElementById('__POSTHOG_TOOLBAR__')?.shadowRoot
                  shadowRoot?.getElementById('posthog-toolbar-styles')?.appendChild(styleLink)
              }
    )

    return (
        <>
            <root.div id="__POSTHOG_TOOLBAR__" className="ph-no-capture" ref={shadowRef}>
                <div id="posthog-toolbar-styles" />
                {didRender && (didLoadStyles || props.disableExternalStyles) ? <ToolbarContainer /> : null}
                <ToastContainer autoClose={8000} transition={Slide} position="bottom-center" />
            </root.div>
        </>
    )
}

Source File: App.tsx From posthog-foss with MIT License

6 votes

function AppScene(): JSX.Element | null {
    const { user } = useValues(userLogic)
    const { activeScene, params, loadedScenes, sceneConfig } = useValues(sceneLogic)
    const { showingDelayedSpinner } = useValues(appLogic)

    const SceneComponent: (...args: any[]) => JSX.Element | null =
        (activeScene ? loadedScenes[activeScene]?.component : null) ||
        (() => (showingDelayedSpinner ? <SceneLoading /> : null))

    const toastContainer = <ToastContainer autoClose={8000} transition={Slide} position="bottom-right" />

    if (!user) {
        return sceneConfig?.onlyUnauthenticated || sceneConfig?.allowUnauthenticated ? (
            <Layout style={{ minHeight: '100vh' }}>
                <SceneComponent {...params} />
                {toastContainer}
            </Layout>
        ) : null
    }

    return (
        <>
            <Navigation>
                <SceneComponent user={user} {...params} />
            </Navigation>
            {toastContainer}
            <UpgradeModal />
        </>
    )
}

Source File: _app.tsx From pawnft with GNU General Public License v3.0

6 votes

// Export application
export default function PawnBank({ Component, pageProps }: AppProps) {
  return (
    // Wrap in global state provider
    <StateProvider>
      {/* Toast container at top for notifications */}
      <ToastContainer />
      <Component {...pageProps} />
    </StateProvider>
  );
}

Source File: App.tsx From freedeck-configurator with GNU General Public License v3.0

6 votes

StyledToastContainer = styled(ToastContainer).attrs({
  // custom props
})`
  .Toastify__toast-container {
  }
  .Toastify__toast {
    background-color: ${colors.accentDark};
    border: 1px solid ${colors.accent};
  }
  .Toastify__toast--error {
  }
  .Toastify__toast--warning {
  }
  .Toastify__toast--success {
  }
  .Toastify__toast-body {
    color: ${colors.brightWhite};
  }
  .Toastify__progress-bar {
    background-color: ${colors.gray};
  }
`

Source File: _app.tsx From Cromwell with MIT License

6 votes

function App(props: AppPropsWithLayout) {
    const { Component, emotionCache = clientSideEmotionCache } = props;
    const getLayout = Component.getLayout ?? ((page) => page);
    const cmsProps: TPageCmsProps | undefined = props.pageProps?.cmsProps;
    const theme = getTheme(cmsProps?.palette);

    return (
        <CacheProvider value={emotionCache}>
            <ThemeProvider theme={theme}>
                {getLayout(<>
                    {Component && <Component {...(props.pageProps ?? {})} />}
                    {!isServer() && document?.body && ReactDOM.createPortal(
                        <div className={"global-toast"} ><ToastContainer /></div>, document.body)}
                </>)}
            </ThemeProvider>
        </CacheProvider>
    );
}

Source File: app.tsx From video-chat with MIT License

6 votes

export default function App(){
  return (
    <ChakraProvider>
      <StoreProvider>
        <Router/>
        <ToastContainer/>
      </StoreProvider>
    </ChakraProvider>
  )
}

Source File: _app.tsx From Cromwell with MIT License

6 votes

function App(props: AppPropsWithLayout) {
  const pageContext = useAppPropsContext();
  const { Component, emotionCache = clientSideEmotionCache } = props;
  const getLayout = Component.getLayout ?? ((page) => page);
  const theme = getTheme(pageContext.pageProps?.cmsProps?.palette);

  React.useEffect(() => {
    if (!isServer()) {
      getRestApiClient()?.onError((info) => {
        if (info.statusCode === 429) {
          toast.error('Too many requests. Try again later');
        }
      }, '_app');
    }
  }, []);

  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        {getLayout(<>
          {Component && <Component {...(props.pageProps ?? {})} />}
          {!isServer() && document?.body && ReactDOM.createPortal(
            <div className={"global-toast"} ><ToastContainer /></div>, document.body)}
        </>)}
      </ThemeProvider>
    </CacheProvider>
  );
}

Source File: ToastNotificationContainer.tsx From dxvote with GNU Affero General Public License v3.0

6 votes

ToastNotificationContainer = styled(ToastContainer)`
  &.Toastify__toast-container--top-right {
    top: 6em;
  }
  .Toastify__toast {
    border: 1px solid ${({ theme }) => theme.colors.text};
    color: ${({ theme }) => theme.colors.text};
    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);
    padding: 0.6rem;
  }
  .Toastify__progress-bar {
    background: ${({ theme }) => theme.colors.text};
  }
  .Toastify__close-button svg {
    height: 20px;
    width: 20px;
    fill: ${({ theme }) => theme.colors.text};
  }
`

Source File: Toast.ts From taskcafe with MIT License

6 votes

ToastedContainer = styled(ToastContainer).attrs({
  // custom props
})`
  .Toastify__toast-container {
  }
  .Toastify__toast {
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 10px;
    background: #7367f0;
    color: #fff;
  }
  .Toastify__toast--error {
    background: ${props => props.theme.colors.danger};
  }
  .Toastify__toast--warning {
    background: ${props => props.theme.colors.warning};
  }
  .Toastify__toast--success {
    background: ${props => props.theme.colors.success};
  }
  .Toastify__toast-body {
  }
  .Toastify__progress-bar {
  }
  .Toastify__close-button {
    display: none;
  }
`

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

6 votes

SplitApp = () => {
  // This split between DXvote and Guilds frontends are temporary.
  // We'll eventually converge changes on the Guilds side to DXvote.
  const location = useLocation();
  const isGuilds = location.pathname.startsWith('/guilds');

  const {
    context: { ensService },
  } = useContext();
  const mainnetProvider = useJsonRpcProvider(MAINNET_ID);

  useEffect(() => {
    ensService.setWeb3Provider(mainnetProvider);
  }, [mainnetProvider, ensService]);

  return (
    <EtherSWRManager>
      {!isGuilds ? (
        <Switch>
          <Web3ReactManager>
            <GlobalStyle />
            <Content>
              <Header />
              <Routes />
              <ToastContainer />
            </Content>
          </Web3ReactManager>
        </Switch>
      ) : (
        <GuildsApp />
      )}
    </EtherSWRManager>
  );
}

Source File: message-container.component.tsx From hive-keychain-extension with MIT License

5 votes

MessageContainer = ({ errorMessage, resetMessage }: PropsFromRedux) => {
  const [timeoutId, setTimeoutId] = useState<any>();
  useEffect(() => {
    if (errorMessage.key) {
      switch (errorMessage.type) {
        case MessageType.ERROR:
          toast.error(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.SUCCESS:
          toast.success(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.WARNING:
          toast.warning(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
        case MessageType.INFO:
          toast.info(
            chrome.i18n.getMessage(errorMessage.key, errorMessage.params),
          );
          break;
      }

      const id = setTimeout(() => {
        close();
      }, DURATION);
      setTimeoutId(id);
    }
  }, [errorMessage]);

  const close = () => {
    resetMessage();
    clearTimeout(timeoutId);
  };

  return (
    <ToastContainer
      position="bottom-center"
      autoClose={DURATION}
      pauseOnHover
      theme="dark"
      onClick={() => close()}
      closeOnClick={true}
      draggable={false}
      bodyStyle={{ fontSize: '16px', fontFamily: 'Futura', fontWeight: '400' }}
    />
  );
}

Source File: App.tsx From Account-Manager with MIT License

5 votes

App: FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const activeBank = useSelector(getActiveBank);
  const activeBankConfig = useSelector(getActiveBankConfig);
  const [getStartedModalIsOpen, toggleGetStartedModal, openGetStartedModal] = useBooleanState(false);
  const [loading, setLoading] = useState<boolean>(true);
  useCrawlSockets();
  useCleanSockets();
  useWebSockets();

  useEffect(() => {
    dispatch(fetchNonDefaultNodeConfigs());
  }, [dispatch]);

  useEffect(() => {
    if (activeBank && !activeBankConfig) {
      setLoading(true);
      const fetchData = async (): Promise<void> => {
        try {
          await dispatch(connect(activeBank));
        } catch (error) {
          displayToast('An error occurred');
        } finally {
          setLoading(false);
        }
      };
      fetchData();
    } else if (!activeBank && !activeBankConfig) {
      setLoading(true);
      const fetchDefaultBankData = async (): Promise<void> => {
        try {
          const response = await dispatch(connectAndStoreLocalData(DEFAULT_BANK, DEFAULT_BANK.ip_address));
          if (response?.error) {
            displayErrorToast(response.error);
            return;
          }
          openGetStartedModal();
        } catch (error) {
          displayToast('An error occurred');
        } finally {
          setLoading(false);
        }
      };
      fetchDefaultBankData();
    } else {
      setLoading(false);
    }
  }, [activeBank, activeBankConfig, dispatch, openGetStartedModal]);

  const renderComponent = (): ReactNode => {
    if (loading) return null;
    if (!activeBank || !activeBankConfig) return <Connect />;
    return <Layout />;
  };

  return (
    <Router>
      {renderComponent()}
      <ToastContainer
        autoClose={3000}
        closeOnClick
        draggable
        hideProgressBar
        newestOnTop
        pauseOnFocusLoss
        pauseOnHover
        position="top-right"
        rtl={false}
        transition={Flip}
      />
      {getStartedModalIsOpen && <CreateAccountModal close={toggleGetStartedModal} isGetStartedModal />}
    </Router>
  );
}

Source File: index.tsx From payload with MIT License

5 votes

Index = () => (
  <React.Fragment>
    <ConfigProvider config={config}>
      <WindowInfoProvider breakpoints={{
        xs: '(max-width: 400px)',
        s: '(max-width: 768px)',
        m: '(max-width: 1024px)',
        l: '(max-width: 1440px)',
      }}
      >
        <ScrollInfoProvider>
          <Router>
            <ModalProvider
              classPrefix="payload"
              zIndex={50}
            >
              <AuthProvider>
                <PreferencesProvider>
                  <SearchParamsProvider>
                    <LocaleProvider>
                      <StepNavProvider>
                        <CustomProvider>
                          <Routes />
                        </CustomProvider>
                      </StepNavProvider>
                    </LocaleProvider>
                  </SearchParamsProvider>
                  <ModalContainer />
                </PreferencesProvider>
              </AuthProvider>
            </ModalProvider>
          </Router>
        </ScrollInfoProvider>
      </WindowInfoProvider>
    </ConfigProvider>
    <ToastContainer
      position="bottom-center"
      transition={Slide}
      icon={false}
    />
  </React.Fragment>
)

Source File: Toast.tsx From game-store-monorepo-app with MIT License

5 votes

ToastifyContainer = () => {
  return <ToastContainer />;
}

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

5 votes

Routes = () => {
  const { history } = useRouter();

  return (
    <Switch>
      <ViewportProvider>
        <Column
          style={{
            position: "relative",
            minHeight: "100vh",
          }}
        >
          <ToastContainer />
          <ScrollToTop />
          <Header
            title={`${
              history.location.pathname === ROUTES.LANDING_PAGE
                ? "Home"
                : history.location.pathname === ROUTES.BLOG
                ? "Blog"
                : titlefy(
                    history.location.pathname.replace(ROUTES.BLOG + "/", "")
                  )
            }  | Django-React-Typescript`}
          />
          <Route path={ROUTES.LANDING_PAGE} exact>
            <LandingPage />
          </Route>
          <Route path={ROUTES.BLOG} exact>
            <BlogPage />
          </Route>
          <Route
            path={ROUTES.PUBLICATION_PAGE}
            exact
            component={PublicationPage}
          />
          <div
            style={{
              bottom: 0,
              marginTop: "auto",
            }}
          >
            <Footer />
          </div>
        </Column>
      </ViewportProvider>
    </Switch>
  );
}

Source File: StateContainer.tsx From mail-my-ballot with Apache License 2.0

5 votes

CustomToastContainer = styled(ToastContainer)`
  @media screen and (min-width: 592px) {
    & .Toastify__toast {
      border-radius: 4px;
      text-align: center;
    }
  }
`

Source File: AlertContainer.tsx From lightning-terminal with MIT License

5 votes

Styled = {
  Body: styled.div`
    margin-right: 10px;
  `,
  Title: styled.div`
    font-family: ${props => props.theme.fonts.open.semiBold};
    font-size: ${props => props.theme.sizes.xs};
    text-transform: uppercase;
  `,
  Message: styled.div`
    font-size: ${props => props.theme.sizes.xs};
  `,
  CloseIcon: styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border: 1px solid ${props => props.theme.colors.offWhite};
    border-radius: 18px;
    transition: background-color 0.3s;

    &:hover {
      color: ${props => props.theme.colors.blue};
      background-color: ${props => props.theme.colors.offWhite};
    }

    svg {
      width: 12px;
      height: 12px;
      padding: 0;
    }
  `,
  Container: styled(ToastContainer)`
    .Toastify__toast {
      border-radius: 4px;
    }
    .Toastify__toast--error {
      color: ${props => props.theme.colors.offWhite};
      background-color: ${props => props.theme.colors.pink};
    }
  `,
}

Source File: App.tsx From foodie with MIT License

5 votes

function App() {
  const [isCheckingSession, setCheckingSession] = useState(true);
  const dispatch = useDispatch();
  const isNotMobile = window.screen.width >= 800;

  useEffect(() => {
    (async () => {
      try {
        const { auth } = await checkAuthSession();

        dispatch(loginSuccess(auth));

        socket.on('connect', () => {
          socket.emit('userConnect', auth.id);
          console.log('Client connected to socket.');
        });

        // Try to reconnect again
        socket.on('error', function () {
          socket.emit('userConnect', auth.id);
        });

        setCheckingSession(false);
      } catch (e) {
        console.log('ERROR', e);
        setCheckingSession(false);
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return isCheckingSession ? (
    <Preloader />
  ) : (
    <Router history={history}>
      <main className="relative min-h-screen">
        <ToastContainer
          position="bottom-left"
          autoClose={5000}
          transition={Slide}
          draggable={false}
          hideProgressBar={true}
          bodyStyle={{ paddingLeft: '15px' }}
        />
        <NavBar />
        <Switch>
          <PublicRoute path={ROUTE.REGISTER} component={pages.Register} />
          <PublicRoute path={ROUTE.LOGIN} component={pages.Login} />
          <ProtectedRoute path={ROUTE.SEARCH} component={pages.Search} />
          <Route path={ROUTE.HOME} exact render={(props: any) => <pages.Home key={Date.now()} {...props} />} />
          <ProtectedRoute path={ROUTE.POST} component={pages.Post} />
          <ProtectedRoute path={ROUTE.PROFILE} component={pages.Profile} />
          <ProtectedRoute path={ROUTE.CHAT} component={pages.Chat} />
          <ProtectedRoute path={ROUTE.SUGGESTED_PEOPLE} component={pages.SuggestedPeople} />
          <Route path={ROUTE.SOCIAL_AUTH_FAILED} component={pages.SocialAuthFailed} />
          <Route component={pages.PageNotFound} />
        </Switch>
        {isNotMobile && <Chats />}
      </main>
    </Router>
  );
}

react-toastify#ToastContainer TypeScript Examples