{"id":13421888,"url":"https://github.com/cyntler/hamburger-react","last_synced_at":"2025-05-14T23:07:10.386Z","repository":{"id":31107712,"uuid":"34667076","full_name":"cyntler/hamburger-react","owner":"cyntler","description":"Animated hamburger menu icons for React.js weighs only 1.5 KB.","archived":false,"fork":false,"pushed_at":"2024-12-22T12:41:05.000Z","size":9711,"stargazers_count":1025,"open_issues_count":11,"forks_count":40,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-12T03:03:01.485Z","etag":null,"topics":["animation","animations","burger","burger-menu","hamburger","hamburger-menu","hooks","icon","icons","menu","navigation","react","reactjs","sidebar","toggle","transition","transitions"],"latest_commit_sha":null,"homepage":"https://hamburger-react.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cyntler.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-27T13:04:17.000Z","updated_at":"2025-05-12T01:47:20.000Z","dependencies_parsed_at":"2024-01-24T15:46:48.511Z","dependency_job_id":"9f9bae1b-7221-48f1-ae71-9f2d07a3b58a","html_url":"https://github.com/cyntler/hamburger-react","commit_stats":{"total_commits":440,"total_committers":11,"mean_commits":40.0,"dds":0.07045454545454544,"last_synced_commit":"4e01b8669d1a497d1970480c8f40a0a9e4557cd3"},"previous_names":["luukdv/hamburger-react"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyntler%2Fhamburger-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyntler%2Fhamburger-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyntler%2Fhamburger-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyntler%2Fhamburger-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyntler","download_url":"https://codeload.github.com/cyntler/hamburger-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243362,"owners_count":22038046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animations","burger","burger-menu","hamburger","hamburger-menu","hooks","icon","icons","menu","navigation","react","reactjs","sidebar","toggle","transition","transitions"],"created_at":"2024-07-30T23:00:33.467Z","updated_at":"2025-05-14T23:07:05.377Z","avatar_url":"https://github.com/cyntler.png","language":"TypeScript","readme":"\u003cp\u003e‌\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"Preview\" src=\"docs/static/preview-no-bg.gif\" height=\"96\" width=\"640\"\u003e\n\u003c/p\u003e\n\u003cp\u003e‌\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ch1 align=\"center\"\u003eAnimated hamburger menu icons for React\u003c/h1\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://hamburger-react.netlify.app\"\u003eHamburger menu icons\u003c/a\u003e for React, with CSS-driven transitions. Created to be as elegant and performant as possible. This means no JavaScript animations, no transitions on non-cheap properties and a small size.\n\u003c/p\u003e\n\n## Installation\n```sh\nnpm install hamburger-react\n```\n\n## Size\nWhen using one hamburger, ~1.5 KB will be added to your bundle (min + gzip).\n\n## Usage\n[Visit the website](https://hamburger-react.netlify.app) for full documentation, API and examples. A basic implementation looks as follows:\n\n```js\nimport Hamburger from 'hamburger-react'\n```\n```js\nconst [isOpen, setOpen] = useState(false)\n```\n```jsx\n\u003cHamburger toggled={isOpen} toggle={setOpen} /\u003e\n```\n\nOr without providing your own state:\n\n```jsx\n\u003cHamburger onToggle={toggled =\u003e ...} /\u003e\n```\n\n## Yet another hamburger library?\nYes. Since the creation of these burgers in 2015 a lot of similar ones have appeared, with one or more of the following downsides:\n\n- Animations that don't feel natural\n- Transitions on expensive properties (jerky animations)\n- No React support\n- Size (additional dependencies besides React or no tree shaking)\n- Not customizable, or too customizable (no sensible defaults)\n- Doing too much\n\n## Accessibility\nIt is recommended to have a tap/click area of at least 48x48 pixels. Therefore, padding will be added around the icon to create a surface of exactly this size.\n\nKeyboard interaction is provided with the `enter` key, and the icon element has the recommended accessibility attributes (such as `role`). You can use the `label` property to supply an ARIA label for the icon.\n\n## Support\nThe icons are hooks-based, and will work with React 16.8.0 ('the one with hooks') or higher.\n","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Menu"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyntler%2Fhamburger-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyntler%2Fhamburger-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyntler%2Fhamburger-react/lists"}