https://github.com/prabhuignoto/react-float-menu
Draggable, Smart menu for react
https://github.com/prabhuignoto/react-float-menu
draggable-menu float-menu menu react react-menu
Last synced: about 2 months ago
JSON representation
Draggable, Smart menu for react
- Host: GitHub
- URL: https://github.com/prabhuignoto/react-float-menu
- Owner: prabhuignoto
- License: mit
- Created: 2022-07-04T19:04:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T06:59:12.000Z (almost 2 years ago)
- Last Synced: 2025-04-03T01:12:25.767Z (about 2 months ago)
- Topics: draggable-menu, float-menu, menu, react, react-menu
- Language: TypeScript
- Homepage: react-float-menu.vercel.app
- Size: 2.23 MB
- Stars: 136
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Features
- ⚡ Configurable and smart floating menu for react
- ⚙️ Comes with a lot of options to customize the behavior of the menu
- 💡 Auto detects edges of the screen and places the menu accordingly
- 🎨 Customize colors with ease
- 📱 Seamless support for mobile and desktop
- 💪 Built with Typescript
Table of Contents
- [📦 Installation](#-installation)
- [🚀 Getting started](#-getting-started)
- [⚙️ Properties](#️-properties)
- [items](#items)
- [🎨 Theme](#-theme)
- [🧪 Tests](#-tests)
- [🍫 CodeSandbox Examples](#-codesandbox-examples)
- [🤝 Contributing](#-contributing)
- [📃 Meta](#-meta)
## 📦 Installation
Install the package with `npm` or `yarn`.
```bash
npm install react-float-menu
```
or
``` bash
yarn add react-float-menu
```
## 🚀 Getting started
Let's get started by creating a new floating menu with drag super power.
```jsx
console.log(val)}
>
```
## ⚙️ Properties
| name | description | default |
| :------------------ | :------------------------------------------------------------------------------------------------------------------------ | :--------- |
| autoFlipMenu | Flips the menu when the button is at the bottom of the screen and there is no space to display the menu | true |
| 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 |
| closeOnClickOutside | Closes the menu if you touch or click outside the menu. | true |
| dimension | Sets the height and width of the button | 30 |
| disableHeader | Disables the header section of the menu. | false |
| iconSize | Size of the menu item icons | "1rem" |
| items | Collection of menu items. Please refer [Menu item model](#menu-item-model) | [] |
| pin | Disables dragging and pins the menu. The button's initial placement will be determined by `startPosition` | 30 |
| shape | Shape of the button. can be `square` or `circle` | `circle` |
| RTL | Renders the menu items right to left. The submenu's will open to the `left side`. | False |
| startPosition | Starting position of the button. can be `top left`,`top right`,`bottom left`,`bottom right` | `top left` |
| theme | With the `theme` object, you can change the colors of different elements. | |
| width | Width of the menu | 30 |
### items
`items` is an array of menu item objects. A menu item represents the individual menu item and its properties.
| name | description |
| :------- | :----------------------------------------------------------------------------------------------------- |
| name | Label of the menu item |
| id | Unique id of the menu item. This is optional as the ids are automatically generated by the library |
| children | The prop takes an array of Menu item objects and it will be rendered as the submenu for this menu item |
| icon | Use this prop to display a icon for the menu item |
| selected | This is an internal prop that is set to true when the menu item is selected |
> submenus are activated by clicking on the menu item or by hovering over the menu item.
## 🎨 Theme
Use the theme object to customize the colors of the different elements of the menu.
| name | description | default |
| :--------------------- | :------------------------------------------------- | :------ |
| menuBackgroundColor | background color of the menu | #FFFFFF |
| menuItemHoverColor | background color of the menu item when its hovered | #318CE7 |
| menuItemHoverTextColor | Text color of the menu item when its hovered | #fff |
| primary | Primary color or the predominant color of the menu | #318CE7 |
| secondary | Secondary color of the menu | #FFFFFF |
```jsx
import {Menu} from 'react-float-menu';
```
## 🧪 Tests
We use [cypress](https://docs.cypresshq.com/guides/guides/introduction/getting-started/) to test the library.
To run the tests, run the following command in the root directory of the project.
```bash
pnpm install
pnpm run cypress:open
```
## 🍫 CodeSandbox Examples
1. [Basic](https://codesandbox.io/s/black-dawn-xzw0xd)
2. [Pinned Menu](https://codesandbox.io/s/staging-darkness-ycfqkm)
3. [Custom Colors](https://codesandbox.io/s/cocky-satoshi-hkm28g)
4. [RTL](https://codesandbox.io/s/interesting-haslett-ulv3re)
## 🤝 Contributing
1. [Fork it](https://github.com/prabhuignoto/react-float-menu/fork)
2. Create your feature branch (git checkout -b new-feature)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin new-feature)
5. Create a new Pull Request
Check out the [contributing guide](/CONTRIBUTING.md) for more details.
## 📃 Meta
Distributed under the MIT license. See `LICENSE` for more information.
Prabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – [email protected]
[https://github.com/prabhuignoto](https://github.com/prabhuignoto)