Hi I am using a simple useReducer Function to Start and Stop a Lottie Animation for a Hamburger Menu Icon
Please suggest a better approach or something with faster performance if it exists or let me know if it is good enough.
Thanks in Advance
import Lottie from 'react-lottie-player/dist/LottiePlayerLight' //@ Lottie Player
import menuIcon from './menu-icon.json' //@ Lottie Menu Icon
import { useReducer } from 'react'
const Menu = () => {
//$ Reducer Hook for Menu State Management
//@ Reducer Function
const controlAnim = (controls, action) => {
switch (action) {
case 'OPEN':
return { isClicked: true, close: false }
case 'CLOSE':
return { isClicked: true, close: true }
case 'SWITCH':
return { isClicked: false, close: !controls.close }
default:
return controls
}
}
//@ States and Controls
const [controls, setControls] = useReducer(controlAnim, {
isClicked: false,
close: false,
})
return (
<div className="menu-header-button" onClick={() => (controls.close ? setControls('CLOSE') : setControls('OPEN'))}>
<Lottie
className="menu-header-button-lottie"
animationData={menuIcon}
loop={false}
speed={1}
play={controls.isClicked}
direction={1}
segments={controls.close ? [55, 90] : [15, 45]}
onComplete={() => setControls('SWITCH')}
/>
</div>
)
}
export default Menu