react-toastify#ToastContainer JavaScript Examples

The following examples show how to use react-toastify#ToastContainer. 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: render.js    From tunnel-tool with MIT License 6 votes vote down vote up 
render = ({
  App,
  watchers,
  reducers,
  urls: { graphql, events }
}) => {
  const { store, history } = configureStore({
    reducers,
    initState: window.__PRELOADED_STATE__
  });
  const client = configureGraph({
    url: graphql,
    initState: window.__APOLLO_STATE__
  });

  const AppRoot = () => {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Provider>
        <ToastContainer />
        <SocketContainer client={client} events={events} />
      </ApolloProvider>
    );
  };

  hydrate(<AppRoot />, document.getElementById("root"));
}
Example #2
Source File: App.jsx    From codeinterview-frontend with Apache License 2.0 6 votes vote down vote up 
App = ({ children }) => {
  const { pathname } = useLocation();
  return (
    <>
      <Provider store={store}>{children}</Provider>
      <ToastContainer
        autoClose={5000}
        transition={Zoom}
        limit={3}
        newestOnTop
        hideProgressBar
      />
      {pathname !== '/' && (
        <div className="placeholder-container">
          <img src={placeHolderImg} id="placeholder-img" />
          <p>Hi there.</p>
        </div>
      )}
    </>
  );
}
Example #3
Source File: App.js    From sofia-react-template with MIT License 6 votes vote down vote up 
App = (props) => {
  return (
    <div>
      <ToastContainer/>
      <HashRouter>
        <Switch>
          <Route path="/" exact render={() => <Redirect to="/template/dashboard" />} />
          <Route path="/template" exact render={() => <Redirect to="/template/dashboard"/>}/>
          <PrivateRoute path="/template" dispatch={props.dispatch} component={LayoutComponent} />
          <Route path="/login" exact component={Login} />
          <Route path="/error" exact component={ErrorPage} />
          <Route path="/register" exact component={Register} />
          <Route component={ErrorPage}/>
          <Route path='*' exact={true} render={() => <Redirect to="/error" />} />
        </Switch>
      </HashRouter>
    </div>
  );
}
Example #4
Source File: index.js    From HITCON-Point-System-2021 with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
ReactDom.render(<div>
                  <App />
                  <ToastContainer
                    theme="dark"
                    position="bottom-center"
                    autoClose={1000}
                    hideProgressBar
                    newestOnTop={false}
                    closeOnClick
                    rtl={false}
                    pauseOnFocusLoss
                    draggable
                    pauseOnHover
                  />
                </div>, document.getElementById("root"));
Example #5
Source File: _app.js    From mailmask with GNU Affero General Public License v3.0 6 votes vote down vote up 
Bootstrap = props => {
  const { Component, pageProps } = props

  return (
    <GlobalConsumer>
      {({ themeName }) => (
        <ThemeProvider theme={themes.get(themeName)}>
          <GlobalStyles />
          <ToastContainer
            autoClose={3000}
            closeButton={false}
            draggable={false}
            hideProgressBar={true}
            pauseOnFocusLoss={false}
            newestOnTop={true}
            closeOnClick={true}
          />
          <Component {...pageProps} />
        </ThemeProvider>
      )}
    </GlobalConsumer>
  )
}
Example #6
Source File: routes.jsx    From howlongistheline.org with Mozilla Public License 2.0 6 votes vote down vote up 
renderRoutes = () => (
  // <Provider store={store}>
    <Router history={browserHistory}>
    <MuiPickersUtilsProvider utils={MomentUtils}>
    <CookiesProvider>
    <ToastContainer />
      <Switch>
        <Route exact path="/" component={Nearme} />
        <Route exact path="/addLine" component={AddLine} />
        <Route exact path="/editLine" component={EditLine} />
        <Route exact path="/shopDetails" component={ShopDetails} />
        <Route exact path="/feedback" component={FeedBack} />
        <Route exact path="/FAQ" component={faq} />
        <Route exact path="/learntocode" component={learntocode} />
        <Route exact path="/duplicated" component={duplicated} />
        <Route exact path="/stocks" component={Stocks} />
        <Route exact path="/editLocation" component={EditLocation} />
      </Switch>
      </CookiesProvider>
      </MuiPickersUtilsProvider>
    </Router>

  // </Provider>
)
Example #7
Source File: App.jsx    From hrms-project-frontend with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div id='App' className='d-flex flex-column'>
      <Router>
        <Navbar />
        <main>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/companystaff/update' component={CompanyStaffUpdate} />
            <Route exact path='/jobadvert' component={JobAdverts} />
            <Route exact path='/jobadvert/add' component={JobAdvertsAdd} />
            <Route exact path='/jobadvert/add/verify' component={JobAdvertsVerify} />
            <Route exact path='/jobseeker/cv/update' component={JobSeekerCVUpdate} />
            <Route exact path='/employer/update' component={EmployerUpdate} />
            <Route exact path='/employer/update/verify' component={EmployerUpdateVerify} />
          </Switch>
        </main>
        <Footer />
        <ToastContainer
          position='bottom-right'
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
        />
      </Router>
    </div>
  );
}
Example #8
Source File: App.jsx    From airboardgame with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <Suspense fallback={<Waiter message={"Loading…"} />}>
      <RecoilRoot>
        <QueryClientProvider client={queryClient}>
          <Router>
            <MainRoute />
          </Router>
        </QueryClientProvider>
      </RecoilRoot>
      <ToastContainer
        position="top-center"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
      />
      <div id="panel-container" />
      <div id="modal-container" />
    </Suspense>
  );
}
Example #9
Source File: App.js    From youtubeclone-frontend with MIT License 6 votes vote down vote up 
App = () => {
  const { token } = useSelector((state) => state.user.data);

  return (
    <ThemeProvider theme={darkTheme}>
      <GlobalStyle />
      <ToastContainer
        autoClose={2500}
        position="top-right"
        closeButton={false}
      />
      {token ? <Router /> : <Auth />}
    </ThemeProvider>
  );
}
Example #10
Source File: App.js    From News24x7-Client with MIT License 6 votes vote down vote up 
function App() {
  return (
    <Provider store={store}>
      <ToastContainer autoClose={8000} />
      <div className="App">
        <Router>
          <Navbar />
          <div
            className="content"
            style={{ minHeight: "calc(100vh - 115px)", PaddingBottom: "20px" }}
          >

            <Switch>
              <Route path="/hello" component={HelloWorld} />
              <Route path="/help" component={HelpPage} />
              <Route exact path="/news24x7" component={LandingPage} />
              <Route exact path="/" component={HomePage} />
              <AuthRoute path="/login" component={LoginPage} />
              <AuthRoute path="/signup" component={SignupPage} />
              <Route path="/post/:postId" component={PostDetails} />
              <Route path="/user/:handle" component={userPage} />
              <Route path="*" component={InvalidPage} />
            </Switch>
          </div>
          <Footer />
        </Router>
      </div>
    </Provider>
  );
}
Example #11
Source File: App.js    From HexactaLabs-NetCore_React-Final with Apache License 2.0 6 votes vote down vote up 
App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/product" component={ProductPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/product-type" component={ProductTypePage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)
Example #12
Source File: App.js    From HexactaLabs-NetCore_React-Level1 with Apache License 2.0 6 votes vote down vote up 
App = (props) => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/producttypes" component={ProductTypes} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)
Example #13
Source File: Layout.jsx    From pods-frontend with MIT License 6 votes vote down vote up 
// This page has no blocking data requirements
// it'll be rendered as static HTML at build time
export function Layout({ children }) {
  return <>
    <Meta
      title='Pod Reference Implementation'
    />

    <ToastContainer
      className='pool-toast'
      position='top-center'
      autoClose={6000}
      transition={Slide}
    />
    
    <OnboardWrapper>
      <div className='container mx-auto py-4'>
        <ConnectWallet />
      </div>

      {children}
    </OnboardWrapper>
  </>
}
Example #14
Source File: App.js    From light-blue-react-template with MIT License 6 votes vote down vote up 
render() {
    return (
        <div>
            <ToastContainer
                autoClose={5000}
                hideProgressBar
                closeButton={<CloseButton/>}
            />
            <HashRouter>
                <Switch>
                    <Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
                    <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
                    <PrivateRoute path="/app" dispatch={this.props.dispatch} component={LayoutComponent}/>
                    <Route path="/register" exact component={Register}/>
                    <Route path="/login" exact component={Login}/>
                    <Route path="/error" exact component={ErrorPage}/>
                    <Route component={ErrorPage}/>
                    <Redirect from="*" to="/app/main/dashboard"/>
                </Switch>
            </HashRouter>
        </div>

    );
  }
Example #15
Source File: App.js    From HexactaLabs-NetCore_React-Level2 with Apache License 2.0 6 votes vote down vote up 
App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/product-type" component={ProductTypePage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)
Example #16
Source File: App.js    From ReactJS-Projects with MIT License 6 votes vote down vote up 
App = () => {
  const [user, setUser] = useState(null)

  return (
    <Router>
      <ToastContainer />
      <UserContext.Provider value={{ user, setUser }}>
        <NavBar />
        <Routes>
          <Route
            exact path="/"
            element={<Home />}
          />
          <Route
            exact path="/signin"
            element={<Signin />}
          />
          <Route
            exact path="/signup"
            element={<Signup />}
          />
          <Route
            exact path="*"
            element={<PageNotFound />}
          />
        </Routes>
        <Footer />
      </UserContext.Provider>
    </Router>
  );
}
Example #17
Source File: App.styled.js    From viade_es2a with BSD 2-Clause "Simplified" License 6 votes vote down vote up 
Toaster = styled(ToastContainer)`
  &.solid-toaster-container {
    //min-width: 380px;
    //margin-left: 0;
    //transform: translateX(-50%);
    padding: 0;
    & .toaster-error {
      color: #fff;
      background: rgba(213, 0, 0, 0.9);
    }

    & .toaster-success {
      color: #fff;
      background: rgba(124, 77, 255, 0.9);
    }
  }

  & .solid-toaster {
    border-radius: 4px;
    //min-width: 380px;
    color: #fff;
    display: flex;
    align-content: center;
    min-height: 72px;
    margin: 0;

    & > .solid-toaster-body {
      margin: 0;
      display: flex;
    }

    & > button {
      color: #fff;
      opacity: 0.8;
    }
  }
`
Example #18
Source File: App.js    From GraphVega with MIT License 6 votes vote down vote up 
function App() {
  return (
    <div className="App">
      <body style={{background:"rgb(246, 246, 246)"}}>
        <Main />
        <ToastContainer />
      </body>
    </div>
  );
}
Example #19
Source File: App.js    From saasgear with MIT License 6 votes vote down vote up 
function App() {
  useDocumentHeader({ title: 'SaaSgear' });
  const { error } = useSelector((state) => state.user);

  useEffect(() => {
    if (error) {
      toast.error(error);
    }
  }, [error]);

  return (
    <ApolloProvider client={client}>
      <BrowserRouter>
        <GlobalStyle />
        <GlobalLoading />
        <ToastContainer />
        <Switch>
          <Route path="/verify-email" component={VerifyEmail} />
          <Route path="/social/:provider/callback" component={Social} />
          <Route
            path="/teams/invitation/:invitationToken"
            component={AcceptInvitation}
          />
          <PublicRoute path="/auth" component={Auth} />
          <PrivateRoute render={(props) => <AdminLayout {...props} />} />
          <Redirect from="*" to="/" />
        </Switch>
      </BrowserRouter>
    </ApolloProvider>
  );
}
Example #20
Source File: ToastContainer.js    From website with MIT License 6 votes vote down vote up 
StyledToastContainer = styled(ToastContainer).attrs({
  // custom props
})`
  .Toastify__toast-container {
  }
  .Toastify__toast {
    padding-left: 20px;

    ${media.largeMobile(css`
      border-radius: 5px;
    `)};
  }
  .Toastify__toast--error {
  }
  .Toastify__toast--warning {
  }
  .Toastify__toast--success {
  }
  .Toastify__toast--dark {
    background-color: #212121;
  }
  .Toastify__toast-body {
  }
  .Toastify__progress-bar {
  }
`
Example #21
Source File: App.js    From HexactaLabs-NetCore_React-Initial with Apache License 2.0 6 votes vote down vote up 
App = props => (
  <Private>
    <Layout {...props}>
      <Route exact path="/" component={HomePage} />
      <Route path="/provider" component={ProviderPage} />
      <Route path="/logout" component={LogoutPage} />
      <Route path="/store" component={StorePage} />
    </Layout>
    <ToastContainer autoClose={2000} />
  </Private>
)
Example #22
Source File: App.js    From twitter-frontend with GNU General Public License v3.0 6 votes vote down vote up 
function App() {

  const { user } = useContext(UserContext);


  return (
    <>
      <ToastContainer autoClose={2000} closeButton={false} />
      {user ? <Router /> : <Auth />}
    </>
  );
}
Example #23
Source File: ReactNotification.js    From expriments_with_react with MIT License 6 votes vote down vote up 
ReactNotificationComponent = ({ title, body }) => {
  let hideNotif = title === "";

  if (!hideNotif) {
    toast.info(<Display />);
  }

  function Display() {
    return (
      <div>
        <h4>{title}</h4>
        <p>{body}</p>
      </div>
    );
  }

  return (
    <ToastContainer
      autoClose={3000}
      hideProgressBar
      newestOnTop={false}
      closeOnClick
      rtl={false}
      pauseOnFocusLoss={false}
      draggable
      pauseOnHover={false}
    />
  );
}
Example #24
Source File: App.styled.js    From portal with GNU General Public License v3.0 6 votes vote down vote up 
Toaster = styled(ToastContainer)`
  &.solid-toaster-container {
    min-width: 410px;
    margin-left: 0;
    transform: translateX(-50%);
    padding: 0;
    & .toaster-error {
      color: #fff;
      background: rgba(213, 0, 0, 0.9);
    }

    & .toaster-success {
      color: #fff;
      background: rgba(124, 77, 255, 0.9);
    }
  }

  & .solid-toaster {
    border-radius: 4px;
    min-width: 410px;
    color: #fff;
    display: flex;
    align-content: center;
    min-height: 72px;
    margin: 0;

    & > .solid-toaster-body {
      margin: 0;
      display: flex;
    }

    & > button {
      color: #fff;
      opacity: 0.8;
    }
  }
`
Example #25
Source File: App.jsx    From core-audit with MIT License 6 votes vote down vote up 
App = () => {

    return (
        <HashRouter>
            <React.Suspense fallback={loading}>
                <ToastContainer />
                <Switch>
                    <Route exact path="/login" name="Login Page"
                        render={ props => <Login {...props}/>}/>
                    <Route path="/" name="Inicio"
                        render={
                            props => <TheLayout {...props}/>}/>

                </Switch>
        </React.Suspense>
    </HashRouter>
    )
}
Example #26
Source File: App.js    From tableau-extension-salesforce-writeback with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <Router>
      <ToastContainer position="top-center" autoClose={2000} hideProgressBar newestOnTop
          closeOnClick rtl={false} pauseOnFocusLoss draggable={false} pauseOnHover
        />
      <Navigator />
    </Router>
  );
}
Example #27
Source File: Main.js    From minerva with MIT License 6 votes vote down vote up 
export default function Main () {
  const {
    datasets,
    projects,
    experiments,
    examples
  } = useContext(GlobalContext)
  return (
    <div className='main'>
      <Header />
      <Switch>
        <Route path='/projects'>
          <ProjectContent
            projects={projects}
            datasets={datasets}
            experiments={experiments}
          />
        </Route>
        <Route path='/datasets'>
          <DatasetContent datasets={datasets} examples={examples} />
        </Route>
        <Route path='/'>
          <Redirect to='/projects' />
        </Route>
      </Switch>
      <ToastContainer />
    </div>
  )
}
Example #28
Source File: App.js    From Blockchain-based-Certificate-Authentication-System with GNU General Public License v3.0 5 votes vote down vote up 
render () {
    const { certid } = this.state
    return(
  <div className="bg-gray-100">
    <div className='min-h-auto bg-gray-100 text-gray-900 flex justify-center'>
      <ToastContainer />
      <div className='max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1'>
        <div className='lg:w-1/2 xl:w-5/12 p-6 sm:p-12'>
          <div className='mt-24 mb-8 flex flex-col items-center'>
            <h1 className='text-2xl xl:text-3xl font-extrabold'>
              Enter the Certificate ID
            </h1>

            <form
              className='w-full flex-1 mt-8 text-indigo-500'
              onSubmit={this.handleSubmit}
            >
              <div className='mx-auto max-w-xs relative '>
                <input
                  className='w-full px-8 py-3 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white'
                  type='String'
                  placeholder='Search Certificate'
                  name='certid'
                  onChange={this.handleChange}
                  value={certid}
                /><button
                type='submit'
                className='mt-3 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-3 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none'
              >
                <span className='ml-3'>Search</span>
              </button>
              </div>
              <div className='flex flex-col text-center text-white items-center'>
                  <span className='ml-4'>Code</span>
              </div>
              <div className="mx-auto text-center text-white max-w-xs relative pb-8">
                <span className='ml-2'></span>
                <span className='ml-2'></span>
                <span className='ml-2'></span>
                <span className='ml-2'></span>
                <span className='ml-2'></span>
                </div>
            </form>
          </div>
        </div>
        <div className='flex-1 bg-indigo-100 text-center hidden lg:flex'>
          <div
            className='m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat'
            style={{ backgroundImage: `url(${loginSADG})` }}
          ></div>
          </div>
        </div>
      </div>
      <footer class='w-full text-center bg-gray-100 text-indigo-700 mt-4 pin-b'>
            Copyright © 2020 by SADG University. All Rights Reserved.
        </footer>
  </div>
    )
  }
Example #29
Source File: App.js    From viade_en2b with MIT License 5 votes vote down vote up 
render() {
    /* setInterval(() => {
      notificationsRecieved();
    }, 2000);*/
    setTimeout(() => {
      if (this.state.render === 0)
        this.setState({
          render: 1,
        });
    }, 5000);
    if (
      window.performance &&
      window.performance.navigation.type == 1 &&
      window.location.href.charAt(window.location.href.length - 1) != "/"
    ) {
      return (
        <Router>
          <Redirect to="/" />
        </Router>
      );
    }

    if (this.state.render > 0)
      return (
        <Fragment>
          <ToastContainer
            closeOnClick
            draggable={true}
            transition={Bounce}
            autoClose={3200}
          />

          <Router>
            <Fragment>
              <Switch>
                <Route exact path="/" component={MainPage} />
                <Route exact path="/login" component={LoginPage} />
                <Route exact path="/routes" component={RoutesPage} />
                <Route exact path="/friends-list" component={FriendsPage} />
                <Route exact path="/upload" component={DropzonePage} />
                <Route exact path="/about" component={AboutPage} />
                <Route
                  exact
                  path="/notifications"
                  component={NotificationsPage}
                />
                <Route exact path="/saveroute" component={SaveRoutePage} />
                <Route exact path="/gpx" component={ImportGpxPage} />
                <Route exact path="/groups" component={FriendGroupsPage} />
                <Route
                  exact
                  path="/groupdetails"
                  component={SeeFriendsOfGroupPage}
                />
                <Route
                  exact
                  path="/creategroup"
                  component={CreateFriendGroupPage}
                />
                <Route exact path="/shareroute" component={ShareRoutePage} />
              </Switch>
            </Fragment>
          </Router>
        </Fragment>
      );
    else {
      return (
        <Fragment>
          <video id="viadegif" autoPlay muted>
            <source src="videos/ViaDe.mp4" type="video/mp4" />
          </video>
        </Fragment>
      );
    }
  }