Ani-React

version 1.1.32

Getting Started

npm i ani-react

Usage

Component

Example

import Animate from "ani-react"
import "ani-react/dist/animation.css"

const App = ()=>{
return <Animate>
I am fading In
  </Animate>

}

Props

props	value	available options
animation	default:fade / string	animation or you can make you Own ending with In and Out
enter	default:true / boolean	true,false
unMountOnExit	default:false / boolean	true,false
options	check bellow options / object
React props

options

options	value	available options
duration	default:1000 / number / unit: ms	number:any
delay	default:0 / number / unit: ms	number:any
fillMode	default:forwards / string	none,forwards,backwards,both,initial,inherit
timingFunction	default:linear / string	animation-timing-function css
playState	default:runing / string	paused,running,initial,inherit
direction	default:normal / string	normal,reverse,alternate,alternate-reverse,initial,inherit,
count	default:initial / string	can be number or infinite,initial,inherit

Hook

Example

import {useAnimate} from "ani-react"
import "ani-react/dist/animation.css"

const App = ()=>{
const {style,setEnter,enter,setOptions} = useAnimate() // add your options

return <div style={style}>
I am fading {enter?"in":"out"}
<button onClick={()=>setEnter(!enter)}>{enter?"in":"out"}</button>

  </div>

}

options

option	value
name	default:fade / string
enter	default:true / boolean
duration	default:1000 / number / unit: ms
delay	default:0 / number / unit: ms
fillMode	default:forwards / string
timingFunction	default:linear / string
playState	default:runing / string
direction	default:normal / string
count	default:initial / string

Animations

name
fade,fadeLeft,fadeRight,fadeUp,fadeDown
slideLeft,slideRight,slideUp,slideDown
zoom,zoomLeft,zoomRight,zoomDown,zoomUp
flipX,flipY
backLeft,backRight,backDown,backUp
bounce,bounceLeft,bounceRight,bounceUp,bounceDown
rotate,rotateUpLeft,rotateUpRight,rotateDownLeft,rotateDownRight
role

Built With

• animate.css - animate.css

Authors

• Adel Chamas - Initial work - Adelchms96

License

This project is licensed under the MIT License - see the LICENSE.md file for details