{"id":16628342,"url":"https://github.com/prabhuignoto/react-float-menu","last_synced_at":"2025-04-10T02:28:11.690Z","repository":{"id":41936577,"uuid":"510474325","full_name":"prabhuignoto/react-float-menu","owner":"prabhuignoto","description":"Draggable, Smart menu for react","archived":false,"fork":false,"pushed_at":"2023-07-19T06:59:12.000Z","size":2334,"stargazers_count":136,"open_issues_count":1,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-03T01:12:25.767Z","etag":null,"topics":["draggable-menu","float-menu","menu","react","react-menu"],"latest_commit_sha":null,"homepage":"react-float-menu.vercel.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/prabhuignoto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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":"2022-07-04T19:04:06.000Z","updated_at":"2024-12-10T08:55:47.000Z","dependencies_parsed_at":"2024-10-26T20:36:35.990Z","dependency_job_id":"5519ec2e-d0ad-4fad-99c3-34dcbb45e4f6","html_url":"https://github.com/prabhuignoto/react-float-menu","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":"0.012820512820512775","last_synced_commit":"e25b3888ea37f5248a5f465db3e0c073e120ad4b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-float-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-float-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-float-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prabhuignoto%2Freact-float-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prabhuignoto","download_url":"https://codeload.github.com/prabhuignoto/react-float-menu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143914,"owners_count":21054844,"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":["draggable-menu","float-menu","menu","react","react-menu"],"created_at":"2024-10-12T04:32:22.458Z","updated_at":"2025-04-10T02:28:11.671Z","avatar_url":"https://github.com/prabhuignoto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003ca href=\"\"\u003e\n \u003cimg src=\"./logo.svg\" align=\"center\" alt=\"logo\" width=\"500\" height=\"350\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://www.npmjs.com/package/react-float-menu\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-float-menu\" alt=\"minzip\"\u003e\u003c/a\u003e\n \u003ca href=\"https://img.shields.io/bundlephobia/minzip/react-float-menu\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/react-float-menu\" alt=\"npm version\"\u003e\u003c/a\u003e\n \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/react-float-menu\" alt=\"build status\"\u003e\u003c/a\u003e\n \u003ca href=\"https://snyk.io/test/github/prabhuignoto/react-float-menu\"\u003e\u003cimg src=\"https://img.shields.io/snyk/vulnerabilities/github/prabhuignoto/react-float-menu\" alt=\"snyk\"\u003e\u003c/a\u003e\n \u003ca href=\"https://app.codiga.io/hub/project/34090/react-float-menu\"\u003e\u003cimg src=\"https://api.codiga.io/project/34090/score/svg\" alt=\"codiga\"\u003e\u003c/a\u003e\n \u003ca href=\"https://depfu.com/github/prabhuignoto/react-float-menu?project_id=36049\"\u003e\u003cimg src=\"https://badges.depfu.com/badges/f3de8a5fe036234eef1005ea21f8af17/overview.svg\" alt=\"depfu\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/prabhuignoto/react-float-menu/actions/workflows/cypress.yml\"\u003e\u003cimg src=\"https://github.com/prabhuignoto/react-float-menu/actions/workflows/cypress.yml/badge.svg\" alt=\"cypress\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003ch2\u003eFeatures\u003c/h2\u003e\n\n- โšก Configurable and smart floating menu for react\n- โš™๏ธ Comes with a lot of options to customize the behavior of the menu\n- ๐Ÿ’ก Auto detects edges of the screen and places the menu accordingly\n- ๐ŸŽจ Customize colors with ease\n- ๐Ÿ“ฑ Seamless support for mobile and desktop\n- ๐Ÿ’ช Built with Typescript\n\n\u003ch2\u003eTable of Contents\u003c/h2\u003e\n\n- [๐Ÿ“ฆ Installation](#-installation)\n- [๐Ÿš€ Getting started](#-getting-started)\n- [โš™๏ธ Properties](#๏ธ-properties)\n - [items](#items)\n- [๐ŸŽจ Theme](#-theme)\n- [๐Ÿงช Tests](#-tests)\n- [๐Ÿซ CodeSandbox Examples](#-codesandbox-examples)\n- [๐Ÿค Contributing](#-contributing)\n- [๐Ÿ“ƒ Meta](#-meta)\n\n## ๐Ÿ“ฆ Installation\n\nInstall the package with `npm` or `yarn`.\n\n```bash\n npm install react-float-menu\n```\n\nor\n\n``` bash\n yarn add react-float-menu\n```\n\n## ๐Ÿš€ Getting started\n\nLet's get started by creating a new floating menu with drag super power.\n\n```jsx\n \u003cMenu\n dimension={40}\n items={[\n { name: \"File\" },\n {\n children: [\n { children: [{ name: \"Cut 1\" }, { name: \"Cut 2\" }], name: \"Cut\" },\n { name: \"Select All\" },\n ],\n name: \"Edit\",\n },\n { name: \"Add\" },\n {\n children: [\n { name: \"Copy from clipboard\" },\n { name: \"Copy selection\" },\n ],\n name: \"Copy\",\n },\n { name: \"Save\" },\n { name: \"Logout\" },\n ]}\n shape=\"square\"\n startPosition=\"top left\"\n width={250}\n onSelect={(val) =\u003e console.log(val)}\n \u003e\n \u003cPlusIcon /\u003e\n \u003c/Menu\u003e\n```\n\n## โš™๏ธ Properties\n\n| name | description | default |\n| :------------------ | :------------------------------------------------------------------------------------------------------------------------ | :--------- |\n| autoFlipMenu | Flips the menu when the button is at the bottom of the screen and there is no space to display the menu | true |\n| bringMenuToFocus | Automatically moves the menu and brings it to focus when the menu is activated from the left or right edge of the screen. | true |\n| closeOnClickOutside | Closes the menu if you touch or click outside the menu. | true |\n| dimension | Sets the height and width of the button | 30 |\n| disableHeader | Disables the header section of the menu. | false |\n| iconSize | Size of the menu item icons | \"1rem\" |\n| items | Collection of menu items. Please refer [Menu item model](#menu-item-model) | [] |\n| pin | Disables dragging and pins the menu. The button's initial placement will be determined by `startPosition` | 30 |\n| shape | Shape of the button. can be `square` or `circle` | `circle` |\n| RTL | Renders the menu items right to left. The submenu's will open to the `left side`. | False |\n| startPosition | Starting position of the button. can be `top left`,`top right`,`bottom left`,`bottom right` | `top left` |\n| theme | With the `theme` object, you can change the colors of different elements. | |\n| width | Width of the menu | 30 |\n\n### items\n\n`items` is an array of menu item objects. A menu item represents the individual menu item and its properties.\n\n| name | description |\n| :------- | :----------------------------------------------------------------------------------------------------- |\n| name | Label of the menu item |\n| id | Unique id of the menu item. This is optional as the ids are automatically generated by the library |\n| children | The prop takes an array of Menu item objects and it will be rendered as the submenu for this menu item |\n| icon | Use this prop to display a icon for the menu item |\n| selected | This is an internal prop that is set to true when the menu item is selected |\n\n\u003e submenus are activated by clicking on the menu item or by hovering over the menu item.\n\n## ๐ŸŽจ Theme\n\nUse the theme object to customize the colors of the different elements of the menu.\n\n| name | description | default |\n| :--------------------- | :------------------------------------------------- | :------ |\n| menuBackgroundColor | background color of the menu | #FFFFFF |\n| menuItemHoverColor | background color of the menu item when its hovered | #318CE7 |\n| menuItemHoverTextColor | Text color of the menu item when its hovered | #fff |\n| primary | Primary color or the predominant color of the menu | #318CE7 |\n| secondary | Secondary color of the menu | #FFFFFF |\n\n```jsx\n\nimport {Menu} from 'react-float-menu';\n\n\u003cMenu\n startPosition=\"top right\"\n theme={{\n menuBackgroundColor: \"#FFFFFF\",\n menuItemHoverColor: \"#318CE7\",\n menuItemHoverTextColor: \"#fff\",\n primary: \"#318CE7\",\n secondary: \"#FFFFFF\",\n }}\n/\u003e\n\n```\n\n## ๐Ÿงช Tests\n\nWe use [cypress](https://docs.cypresshq.com/guides/guides/introduction/getting-started/) to test the library.\n\nTo run the tests, run the following command in the root directory of the project.\n\n```bash\n pnpm install\n pnpm run cypress:open\n```\n\n## ๐Ÿซ CodeSandbox Examples\n\n1. [Basic](https://codesandbox.io/s/black-dawn-xzw0xd)\n2. [Pinned Menu](https://codesandbox.io/s/staging-darkness-ycfqkm)\n3. [Custom Colors](https://codesandbox.io/s/cocky-satoshi-hkm28g)\n4. [RTL](https://codesandbox.io/s/interesting-haslett-ulv3re)\n\n## ๐Ÿค Contributing\n\n1. [Fork it](https://github.com/prabhuignoto/react-float-menu/fork)\n2. Create your feature branch (git checkout -b new-feature)\n3. Commit your changes (git commit -am 'Add feature')\n4. Push to the branch (git push origin new-feature)\n5. Create a new Pull Request\n\nCheck out the [contributing guide](/CONTRIBUTING.md) for more details.\n\n## ๐Ÿ“ƒ Meta\n\nDistributed under the MIT license. See `LICENSE` for more information.\n\nPrabhu Murthy โ€“ [@prabhumurthy2](https://twitter.com/prabhumurthy2) โ€“ prabhu.m.murthy@gmail.com\n[https://github.com/prabhuignoto](https://github.com/prabhuignoto)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Freact-float-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprabhuignoto%2Freact-float-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprabhuignoto%2Freact-float-menu/lists"}