1.1.2 • Published 4 years ago
react-success-popup v1.1.2
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>