How to use the react-toastify.cssTransition function in react-toastify

To help you get started, we’ve selected a few react-toastify examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github synzen / Discord.RSS / src / web / client / src / js / components / ControlPanel / utils / toast.js View on Github external
import React from 'react'
import { toast, cssTransition } from 'react-toastify'
import styled from 'styled-components'

const PaddedText = styled.div`
  padding: 0.5em;
`

const DiscordAnim = cssTransition({
  enter: 'bounceIn',
  exit: 'minimizeOut',
  duration: 350
})

export default {
  success: (message, options) => {
    toast.success({message}, {
      ...options,
      autoClose: 2500,
      transition: DiscordAnim,
      className: `discord-alert-success`
    })
  },
  error: (message, options) => {
    toast.error({message}, {
github eez-open / studio / packages / eez-studio-ui / chart / measurements.tsx View on Github external
import * as notification from "eez-studio-ui/notification";
import { cssTransition } from "react-toastify";

import { ChartsController, ChartController } from "eez-studio-ui/chart/chart";
import * as GenericChartModule from "eez-studio-ui/chart/generic-chart";
import { WaveformFormat, initValuesAccesor } from "eez-studio-ui/chart/buffer";

////////////////////////////////////////////////////////////////////////////////

const CONF_MAX_NUM_SAMPLES_TO_SHOW_CALCULATING_MESSAGE = 1000000;

////////////////////////////////////////////////////////////////////////////////

let calculatingToastId: any;

const Fade = cssTransition({
    enter: "fadeIn",
    exit: "fadeOut",
    duration: 0
});

function showCalculating() {
    if (!calculatingToastId) {
        calculatingToastId = notification.info("Calculating...", {
            transition: Fade,
            closeButton: false
        });
    }
}

function hideCalculating() {
    if (calculatingToastId) {
github AugurProject / augur / packages / augur-app / src / renderer / app / components / notifications / notifications.js View on Github external
import React, { Component } from 'react';
import PropTypes from "prop-types";
import { each, take, isEqual } from 'lodash'
import { ToastContainer, toast, cssTransition } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import Styles from './notifications.style.less'
import Transition from 'react-transition-group/Transition';

const Zoom = cssTransition({
  enter: Styles.zoomIn,
  exit: Styles.zoomOut,
});

const Msg = ({ notification, closeToast }) => (
  <div>
    <div>{notification.message}</div>
    <button>
  </button></div>
)

Msg.propTypes = {
  notification: PropTypes.object.isRequired,
  closeToast: PropTypes.func
}