Configurable React Success Popup

Screenshot with default settings

Usage

import SuccessPopup from 'react-success-popup'
;<SuccessPopup>Subscribed</SuccessPopup>

Configuration

All the CSS settings can be overridden. SVG animation accept only limited settings.

Card settings

its a div element so you can apply any settings you want.

The defaults:

{
  transition: `opacity '300ms' ease-in`,
  opacity: opacity,
  position: 'absolute',
  left: '50vw',
  top: '50vh',
  transform: 'translate(-50%, -50%)',
  background: '#242424',
  borderRadius: '9px',
  width: '495px',
  height: '495px',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
}

Example apply red background color to the popup

<SuccessPopUp theme={card:{
    backgroundColor: 'red'
}}>Subscribed</SuccessPopUp>

Check SVG settings

its an animated svg element. Only three settings will be applied to that element.

The defaults:

{
  strokeColor: '#B0B0B0',
  strokeWidth: 20,
  duration: '0.5s'
}

Example apply 1s check animation

<SuccessPopUp theme={check:{
    duration: '1s'
}}>Subscribed</SuccessPopUp>

Text wrapper settings

Its a div wrapper around the span text. You can override and extend any setting.

The defaults:

textWrapper: {
   marginTop: '75px',
   marginLeft: '-20px',
}

Example move text closer to the check

<SuccessPopUp theme={textWrapper:{
    marginTop: '25px'
}}>Subscribed</SuccessPopUp>

Text settings

Its a span text. You can override and extend any setting.

The defaults:

text: {
   fontFamily: 'Roboto',
   fontStyle: 'normal',
   fontWeight: '500',
   fontSize: '45px',
   lineHeight: '53px',
   color: '#AEAEAE',
}

Example make text of a red color

<SuccessPopUp theme={text:{
    color: 'red'
}}>Subscribed</SuccessPopUp>