Draggable, Smart menu for react

Last update: Jul 30, 2022

logo

minzip npm version build status snyk codiga depfu cypress

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

Install the package with npm or yarn.

  npm install react-float-menu

or

  yarn add react-float-menu

๐Ÿš€ Getting started

Let's get started by creating a new floating menu with drag super power.

console.log(val)} > ">
  <Menu
    dimension={40}
    items={[
      { name: "File" },
      {
        children: [
          { children: [{ name: "Cut 1" }, { name: "Cut 2" }], name: "Cut" },
          { name: "Select All" },
        ],
        name: "Edit",
      },
      { name: "Add" },
      {
        children: [
          { name: "Copy from clipboard" },
          { name: "Copy selection" },
        ],
        name: "Copy",
      },
      { name: "Save" },
      { name: "Logout" },
    ]}
    shape="square"
    startPosition="top left"
    width={250}
    onSelect={(val) => console.log(val)}
  >
    <PlusIcon />
  </Menu>

โš™๏ธ 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 []
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
">
import {Menu} from 'react-float-menu';

<Menu
  startPosition="top right"
  theme={{
    menuBackgroundColor: "#FFFFFF",
    menuItemHoverColor: "#318CE7",
    menuItemHoverTextColor: "#fff",
    primary: "#318CE7",
    secondary: "#FFFFFF",
  }}
/>

๐Ÿงช Tests

We use cypress to test the library.

To run the tests, run the following command in the root directory of the project.

  pnpm install
  pnpm run cypress:open

๐Ÿซ CodeSandbox Examples

  1. Basic
  2. Pinned Menu
  3. Custom Colors
  4. RTL

๐Ÿค Contributing

  1. Fork it
  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 for more details.

๐Ÿ“ƒ Meta

Distributed under the MIT license. See LICENSE for more information.

Prabhu Murthy โ€“ @prabhumurthy2 โ€“ [email protected] https://github.com/prabhuignoto

GitHub

https://github.com/prabhuignoto/react-float-menu
You might also like...

Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

Jul 31, 2022

๐Ÿ”€ Drag and drop for your React lists and tables. Accessible. Tiny.

๐Ÿ”€ Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Aug 4, 2022

:sparkles: A sortable and resizable pane component for React.

:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

Jul 30, 2022

Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Jul 11, 2022

Drag and Drop for React

Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

Aug 6, 2022

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and  extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Aug 5, 2022

Drag and Drop for React

Drag and Drop for React

Aug 8, 2022

Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

Aug 8, 2022

React Drag and Drop file input

React Drag and Drop file input

React Drag and Drop file input

Jul 22, 2022
Comments
  • 1. [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 13% ๐ŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /logo.png | 54.08kb | 45.16kb | 16.50% | | /logo.svg | 30.49kb | 28.84kb | 5.42% | | | | | | | Total : | 84.57kb | 74.00kb | 12.51% |


    ๐Ÿ“ docs | :octocat: repo | ๐Ÿ™‹๐Ÿพ issues | ๐Ÿช marketplace

    ~Imgbot - Part of Optimole family

    Reviewed by imgbot[bot] at 2022-07-18 19:06
React draggable component
React draggable component

A simple component for making elements draggable.

Aug 5, 2022
A draggable and resizable grid layout with responsive breakpoints, for React.
A draggable and resizable grid layout with responsive breakpoints, for React.

React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React.

Aug 4, 2022
Draggable and Resizable component running at 60FPS using React Native Reanimated v2
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Jun 23, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Aug 1, 2022
React component for a list of draggable collapsible items
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Jul 27, 2022
A simple draggable list component for React
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

Jul 14, 2022
Draggable tree for react.

react-draggable-tree Draggable tree for react. installation npm install -S @jswork/react-draggable-tree properties Name Type Required Default Descript

Mar 25, 2021
A simple component for making elements draggable

React Draggable Component A simple component for making elements draggable.

Jul 15, 2022
Beautiful and accessible drag and drop for lists with React
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Aug 1, 2022
Drag and Drop for React
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

Jul 31, 2022