
Security News
npm ‘is’ Package Hijacked in Expanding Supply Chain Attack
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
react-animate-style
Advanced tools
Easy animate react app with animate.css library
With npm :
npm install --save react-animate-style
With yarn :
yarn add react-animate-style
Import Animation
component from react-animate-style
and wrap your content with <Animation>[...]</Animation>
tags. Availables props to configure animation are described in Props section
import {Animation} from 'react-animate-style'
class Example extends Component {
render() {
return <Animation animationIn="bounceIn" animationOut="bounceOut" >
<div>My animated content</div>
</Animation>
}
}
animationIn
The animation to use when the component mounts or when isVisible change to true. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste
animationOut
The animation to use when the component unmounts or when isVisible change to false. If not set or set to null, No animation will be applied. You need to use the animate.css animation name. You can also read Available animations section to get the complete liste
animationInDelay
The delay in miliseconds to wait before start the entrance animation. For example, to wait 1 second before start animation, you need to set this props to 1000
animationOutDelay
The delay in miliseconds to wait before start the exit animation. For example, to wait 1 second before start animation, you need to set this props to 1000
animationInDuration
The duration in miliseconds of the entrance animation. By default it set to 1000
or 1 second
animationOutDuration
The duration in miliseconds of the exit animation. By default it set to 1000
or 1 second
isVisible
Display or not the content. Set this to true
to start the entrance animation (if defined) and display this component.
Set this to false
to start the exit animation (if defined) and hide this component.
By default, this parameter is set to true
. In this way, if you not provide this props, content of Animation
is automatically animated and displayed on render.
Note : Exit animation is started when
isVisible
is set tofalse
only ifisVisible
was set totrue
in a previous state. IfisVisible
receivefalse
as initial state, content is hidden but not animation was launched on render.
style
The JSS style object applied to the component.
for example, you can set this value to { backgroundColor: '#ff0000' }
className
The complementary classes to apply to animation container.
For exemple, you can set this to 'my-class'
ref
The ref to attach to the animation container.
Available animations are all animations available on Animate.style webstie. You can try each of them on their website
MIT © fabienlege
FAQs
Easy animate react app with animate.css library
The npm package react-animate-style receives a total of 16 weekly downloads. As such, react-animate-style popularity was classified as not popular.
We found that react-animate-style demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.
Security News
A critical flaw in the popular npm form-data package could allow HTTP parameter pollution, affecting millions of projects until patched versions are adopted.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.