DEV Community

Cover image for Burger Animation with React Hooks
Paul Ryan
Paul Ryan

Posted on

2 1

Burger Animation with React Hooks

I was recently messing around in Codesandbox with a react app and wanted to animate a burger SVG but in order to do this, I needed to use refs which meant I had to change my functional component to be a class! I also needed to use the lifecycle method componentDidMount so it looked like I was all out of options.

But...maybe...this Hooks thing everyone is talking about will save me? Turns out it did.

Previously I had to create my refs in the constructor like so:

constructor(props){
  super(props)
  this.burgerRef = React.createRef()  
}

Now I could do:

const burgerRef = useRef(null);

Still I needed some way to detect when my component mounted, otherwise I would try to animate an undefined element which is not fun! useEffect comes to the rescue:

So instead of:

componentDidMount(){
    ....
}

I could just do:

useEffect(() => {
  ....
})

And voila! I could now do a nice animation without needing to change my component to be a class.

I simply discussed the theory here, all the code including the animation is on the following Codesandbox (Codesandbox is really great, I am a patreon and I think everyone should be, I don't get anything for saying this or promoting Codesandbox but I just love it!!!!)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (2)

Collapse
 
nishimotos93047 profile image
Nishimotoson Kirven

To create a burger animation using React Hooks, you can start by setting up a state variable to manage the open and closed states of the burger menu. Use the useState hook to toggle the menu when a button is clicked, which will trigger a CSS animation for a smooth transition. As the burger icon opens, you can display a dropdown with a jack in the box menu with prices that includes enticing items like the Jumbo Jack for $4.29, Chicken Sandwich for $5.19, and the classic Tacos for $1.39 each. Implement additional animations to enhance the user experience, making the menu visually appealing and engaging for users exploring the delicious options available.

Collapse
 
bryier_adam_41494fd967bfb profile image
Bryier Adam

To create a burger menu animation using React Hooks, begin by defining a state variable to handle the menu's open and closed states. Leverage the useState hook to toggle the menu when a button is clicked, triggering a CSS animation for a seamless transition. As the burger menu opens, display a dropdown featuring a Popeyes menu with prices, showcasing items like the Spicy Chicken Sandwich for $4.99, the Classic Chicken Sandwich for $4.49, and the iconic Cajun Fries for $3.49. Enhance the user experience with additional animations, making the menu dynamic and visually engaging for users as they explore these delicious options.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more