react-toastify#ToastContainer JavaScript Examples

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"));
}

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>
      )}
    </>
  );
}

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>
  );
}

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"));

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>
  )
}

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>
)

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>
  );
}

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>
  );
}

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>
  );
}

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>
  );
}

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>
)

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>
)

// 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>
  </>
}

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>

    );
  }

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>
)

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>
  );
}

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;
    }
  }
`

function App() {
  return (
    <div className="App">
      <body style={{background:"rgb(246, 246, 246)"}}>
        <Main />
        <ToastContainer />
      </body>
    </div>
  );
}

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>
  );
}

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 {
  }
`

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>
)

function App() {

  const { user } = useContext(UserContext);


  return (
    <>
      <ToastContainer autoClose={2000} closeButton={false} />
      {user ? <Router /> : <Auth />}
    </>
  );
}

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}
    />
  );
}

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;
    }
  }
`

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>
    )
}

export default function App() {
  return (
    <Router>
      <ToastContainer position="top-center" autoClose={2000} hideProgressBar newestOnTop
          closeOnClick rtl={false} pauseOnFocusLoss draggable={false} pauseOnHover
        />
      <Navigator />
    </Router>
  );
}

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>
  )
}

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>
    )
  }

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>
      );
    }
  }