Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
Reactjs-popup is a new and simple react popup component built using react fragments which is one of the new features that comes with react 16. And it can handle multiple use cases.By using this tiny react popup component you can create a Tooltips, Modals andĀ Menus.
By the end of this article you will be able to create your custom burger menu with reactjs-popup.
Ready!! Letās getĀ started.Step 1: Create the burger Icon component.
We will start by building a burger icon component,
As you see we pass the āopenā prop to the component so we can permute the icon class name as the preview exampleĀ explains
You can find some good examples for burger icon with animation here
Step 2: Customize CSSĀ Menu
Our menu will be a simple list, so letās take the reactjs-popup home page menu and use it as anĀ example.
As you see this menu is a simple ul element, nothingĀ special.
Step 3:integrate all stuff with reactjs-popup
All we need to do in this part is to import the reactjs-popup component and set the burger menu as a trigger prop for the popup component and the menu as the popup children. simple, is itĀ ? magicĀ !!
Thanks to the āfunction as a children patternā the trigger can access to the popup state easily. we need also to pass props to the burger component like the following.
Adding some custom css and this is the finalĀ result.
If you read this article from your smartphoneĀ , you can see the burger button to launch the menu in reactjs-popup homeĀ page.
Demo CodeĀ source
yjose/reactjs-popup-burger-menu
Read more from my articlesĀ :
- Introducing reactjs-popup š āReact popup, Modals, Tooltips and MenusāāāAll in one
- Frontend Performance Check-list For Production
- A step-by-step guide to making pure-CSS tooltips
Thanks for reading! If you think other people should read this post and use this component,tweet and share theĀ post.
Remember to follow me on Medium so you can get notified about my futureĀ posts.
If you liked this story, feel free to ššš a few times (Up to 50 times. Seriously).
Create a fancy burger menu using reactjs-popup was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.