cyntler / hamburger-react Goto Github PK
View Code? Open in Web Editor NEWAnimated hamburger menu icons for React.js weighs only 1.5 KB.
Home Page: https://hamburger-react.netlify.app
License: MIT License
Animated hamburger menu icons for React.js weighs only 1.5 KB.
Home Page: https://hamburger-react.netlify.app
License: MIT License
Hello!
To implement the disclosure pattern, that would be nice to be able to add the aria-expanded property.
We can do something similar to #15.
I'd be happy to send a PR if you're okay with this feature :)
Thanks!
So in chrome it works flawlessly but on Safari, it is buggy and when clicked it makes half the items disappear and later whole hamburger is not visible.
I was wonder if we can change the area size,
the default size is 48, and how about if I reduce it using props, let say I change it to 32.
is that possible? thanks
Hi. Is there a way to trigger the animation on hover and not only on click??
I've used this and this
.hamburger {
visibility: hidden;
}
and
.hamburger {
display: none;
}
to toggle visibility but none of these worked.
Is there any other way to do this?
Hello,
I tried to install your package and there is a compilation error in the package :
"./node_modules/hamburger-react/dist-esm/Spin.js
Module parse failed: Unexpected token (12:13)
You may need an appropriate loader to handle this file type.
| onKeyUp: e => e.key === 'Enter' && o.handler(),
| role: "button",
| style: { ...o.burgerStyles,
| transform: ${o.isToggled ?
rotate(${180 * (o.isLeft ? -1 : 1)}deg) : 'none'}
| },"
The problem seems to be "...o.burgerStyles", when I delete it, the package compile correctly,
Can you solve my issue please ?
Thanks a lot
I think it's good that the hamburger defaults to 48x48 pixels, however I would like to be able to add the padding myself or create my own clickable area around/on top of the react burger. This would make styling a lot easier too.
Hi there, I am using a dark mode toggle theme, and everything in my website changes colours straight away except the burger menu, is there any way for me to disable transition on colours?
Many thanks
Loving the togglers!
The animation causing the menu to disappear is observed specifically on iOS devices. It works correctly on my Windows laptop using Chrome, but the issue persists on Safari and Chrome browsers on my phone as well.
I am not sure if its for all but most of the components doesn't have properties for styling <Sling onToggle={props.clicked} color="white" size={18} hideOutline={true}/>
is there a way to fix this cos i have read the documentations
hello
Is it possible to have the hamburger icon black when closed and the x icon white (or other color) ?
how can i change the icon color on open?
because when it is open my menu is black.
Thanks
Inbal
Hey there, I have a use case to handle the event fired when clicking the underlying dom node that triggers the toggle and onToggled handler. I've created a PR with how this might be implemented.
Let me know what you think! #40
I've been using this package for a while and I've got no complaints; it's awesome ๐ฅ
Would it be possible to add a controls prop to the hamburgers? It would provide more context to screen readers about the actual item the hamburger is controlling.
I've been working around this with this hack:
useEffect(() => {
const menu = document.querySelector(".hamburger-react");
menu.setAttribute("aria-controls", "primary-navigation");
}, []);
If it is possible, can I be assigned to the task?
Closed
Version 2.5.0
Steps to Reproduce
When users interact with the menu on mobile devices, the burger is highlighted during the transition.
Reproduceable on the example site: https://hamburger-react.netlify.app/
Note
This may or may not be expected, but it would be nice to have the option to turn it off. I recognize most click events on mobile are associated with this behavior.
Workaround
My temporary (tested only on chrome) workaround using style jsx:
<div className='burger-container' onClick={props.onClick}>
<Spiral size={28} label='menu' easing="ease-out" hideOutline={true}/>
</div>
<style jsx>{`
.burger-container:first-child {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
`}</style>
webkit, moz, ms, and user-select statements taken from this stack overflow.
Since this function's HTML element is a div container with the button role (as it should be the standards), it should also have some accessible name.
You can detect this by making a CRA with this hamburger menu, and running it through lighthouse (either locally or after deployment). This issue will show up: https://web.dev/button-name/.
We can set an accessible name through the 'label' property but that should default to some reasonable value.
Edit:
After further testing, it seems that using the 'label' property doesn't resolve the accessible name issue.
I would love to add subtle hover animation, similar like this one from Pangram Pangram:
I've tried manually overriding the CSS like this:
.hamburger-react:hover div:first-of-type > div {
top: 16px !important;
}
.hamburger-react:hover div:last-of-type > div {
top: 30px !important;
}
I could live with the fixed values and those !important
s if it worked well, but this approach results in broken styling when the menu is open and still hovered on:
It's probably possible to find a way to hack around it to make it work, but I was wondering if you are considering to add some styling options for hover state?
Thank you for such a straight-forward and clean menu implementation. I'm happy with it with or without hover ๐
Hello, thank you for this cool library!
I am using this for my portfolio site that has a custom cursor pointer. I noticed that there is a cursor with 'pointer' styling when hovered on the menu icons.
Is there a way to disable the cursor pointer on hover?
Thanks
Just had a really weird bug I want to document. I was using the import as expected:
import Hamburger from "hamburger-react";
and for some reason I was running into this issue, Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
which means that my import wasn't right.
Super weird since the default import is already specified and it works in development, but it fails when I run npm run build
If I change the import to import {Squash as Hamburger} from 'hamburger-react';
, it works again.
React v18 was released.
Love this library btw... makes life easy.. but it doesn't seem to work on mobile view and that's where I need it the most
I'm using this with tailwind css and I can't seem to manage to hide the burger on larger screens, atm I have something like this:
I tried to set important tags in tailwind config but it doesn't seem to work still
<Hamburger className="sm:hidden" toggled="isOpen" toggle="setIsOpen"/>
Ignore me sorry for the trouble, really tired. I just encapsulated the component in a div with the hidden class..
Hey there! Saw this package on reddit a few days ago and thought I'd give it a try, I really like the animations.
I tried this out in my project and ran into an issue and wondering if you could help. I have it working to open and close my menu just fine, but inside my menu I want to be able to click on a navigation item and have that close the menu after I click on it. I currently can't fire off a function to affect the Hamburger state, essentially.
What I am proposing is maybe a new property (named toggled
perhaps?) that accepts a boolean
value, so that I can control the toggling state of the Hamburger from clicking on something that isn't the Hamburger.
Example:
// hook for showing/hiding menu
const [menuIsToggled, setMenuIsToggled] = useState(false);
// elsewhere in my code, a function that closes the menu after a navigation item is clicked
const closeMenuAndNavigate = () => {
// navigate to new page, then close the menu
navigate('/');
setMenuIsToggled(false); // close the menu
}
// Later on, I can control the Hamburger's internal state with a `toggled` prop,
// and still use `onToggle` to trigger the change
<Hamburger toggled={menuIsToggled} onToggle={() => setMenuIsToggled(!menuIsToggled)} />
Look forward to hearing back. Thanks!
Hi @luukdv,
Thanks for this amazing library!
I have a problem with nextjs and typescript. When I try to import your library, I get an error about module resolution.
My tsconfig.json
has "moduleResolution": "node"
Following the error:
Error: Must use import to load ES Module:
Could you add this export?
Thanks so much!
Cheers! ๐ป
Hi ๐,
I'm Romuald from the Lsos, an organization that develops financial solutions for open source, and we are currently reaching out to projects we like.
We have several solutions depending on your financial goals and we can help with:
For example, we can increase donations with the Lsos Donation Reminder and the Lsos Donation Fund.
We can also leverage a license clause if you are interested in receiving a substantial remuneration from your open source work. Our license clauses are designed to keep code:
Large companies want two things: open source and a way to pay for software. They prefer paying for well-maintained tools rather than using free but unreliable tools. At the end of the day, a license clause can be a win for everyone.
We are focusing on solving the financials of a handful of projects first to then eventually tackle the open source financing problem at large. Let me know if you are interested.
Rom
Hi!
Love the simplicity and elegancy of your component, thanks for sharing it with the world!
I tried to use it on a project of mine, customizing everything I could but it was feeling off, I didn't know why then it hit me. Your component has an opinionated easing function that is very different than what I use on the rest of my website interactions.
Would you mind adding an option to customize this too?
Thanks!
Basically, i wanted to have my menu in this style:
But the ones i found can either work in only one theme mode or others dont have typescript support(Although having typescript is not much needed but its better that way) and some dont look too good.
Could you add something for this? In the form of line width separately or as a different ham menu style component.
And also a possibility to reverse the menu.
You could add it as a prop that can be set by the developer or you could set with a default value. I know I could contain in another wrapper that has accessibility attributes, but it would be easier if it's already embedded in.
Great library BTW
Spread operator is not supported on Microsoft Edge and lib fails with following error:
{
"description": "Expected identifier, string or number",
"message": "Expected identifier, string or number",
"number": -2146827260,
"stack": "SyntaxError: Expected identifier, string or number at ./node_modules/hamburger-react/dist-esm/Tilt.js[...]"
}
Hello,
I have a question can we change backgraound
color on by condition
use this toggled
stated
Hi folks,
This is a great library so thank you! I have a question when a user toggles open the menu and clicks a Link to - is that a way to have the menu close again. Here is my code:
I have tried to use:
toggled={isOpen} toggle={setOpen}
On the menu anchor tag and list item tag too. What am I doing wrong here?
Thank you,
Ben.
I unfortunately don't have the time and/or energy anymore to maintain this library, which means I'm looking for someone who is willing to take over.
It would be amazing if someone is interested to keep giving love to these hamburgers. You'd be making sure this little library (that gets 100K-125K downloads per month) stays alive! Please reach out if that's you or if you know anyone.
It would be great if there was a prop to set the line width. So something like this:
<Hamburger lineWidth={3} />
Keep up the epic work!! ๐ช๐
The icon animations are not working on Chrome iOS. Using the demo site (https://hamburger-react.netlify.app/), clicking the icons transitions between states without any animation. Using other browsers on my phone (Safari, Firefox, Edge) the animations work perfectly. Issue seems to be only affecting Chrome. I am running Chrome iOS version 102.0.5005.87 and iOS version 15.5
I've attached videos of the demo site in both Chrome (not-working) and Safari (working)
I was curious if theres a way to add a label next to the icon (e.g. "Menu") that would also toggle the icon animation. Thanks for the help and for publishing this project!
Thanks for the work with this library!
Unfortunately, it seems the animations don't work on mobile, even in the demo site.
There are no transitions, and the menu just go from one form to the other without any animation.
You need to try on a real device, not the devtools
Thank you for this library! I would love to make use of it in my React project but I use TypeScript and the lack of bindings prevent me from doing so easily. I would appreciate if you published types for your components as well.
This is a simple fix, pass the aria-label prop to the component.
Maybe something like this:
<Hamburguer aria-label="Open menu" />
Here's more information
Good day,
thank you for creating this library, it looks nice!
I would like to show it only on a small screen size while using Styled-components. I therefore tried to instantiate the Hamburger as follows:
const StyledHamburger = styled(Hamburger)`
@media(min-width: 770px){
display: none;
}
`;
However, as the className is not attached to the element, this does not work. See the Styled-components documentation for more information.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.