React-toastify: autoClose doesn't work if you don't include ReactToastify.css ?

[DrMeers]

If I don't include ReactToastify.css (which I'd prefer to omit than try to override everything I don't want/need from there), the toasts remain until clicked rather than unmounting after the autoClose delay... would it be worth documenting or providing a minimal CSS workaround to support autoClose without the bundled CSS?

[fkhadra]

Hello @DrMeers,

Thanks for the feedback.

The autoClose is triggered when the progress bar animation end. An onAnimationEnd event is bound to the component.

Regarding your needs, I see 1 easy workaround possible. In the sample below, open the style file to see the minimum style needed to trigger autoClose.

[DrMeers]

Brilliant, thank you very much @fkhadra

[dimre01]

The styles provided in the Code Sandbox aren't sufficient to make toasts auto-dismiss on Safari or Edge. We discovered that the following styles are necessary:

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  animation: Toastify__trackProgress linear 1;
}

[ilyaulyanov]

@dimre01 thanks for saving me debugging time

for styled-components users:

import { keyframes } from 'styled-components'

const Toastify__trackProgress = keyframes`
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
`

export const CustomWrapperStyled = styled.div`
  .Toastify__progress-bar {
    animation: ${Toastify__trackProgress} linear 1;
  }
`

[thecyberd3m0n]

it seems like even if you add "display:none" to .Toastify__progress-bar it will stop work. For me 'visibility: hidden' was the solution

[hassench]

Hello @DrMeers,

Thanks for the feedback.

The autoClose is triggered when the progress bar animation end. An onAnimationEnd event is bound to the component.

Regarding your needs, I see 1 easy workaround possible. In the sample below, open the style file to see the minimum style needed to trigger autoClose.

The sandbox does not work anymore :/

[sikhote]

For emotion:

import { keyframes } from '@emotion/core';

const toast = keyframes({
  '0%': {
    transform: 'scaleX(1)',
  },
  '100%': {
    transform: 'scaleX(0)',
  },
});

const styles = {
  global: {
    '.Toastify__progress-bar': {
      animation: `${toast} linear 1`,
    },
  },
};
...
<Global styles={styles.global} />