Floating Menu

If you work with big project's that is composed of many sub-projects, you need tool that link you to specific sub-project from another one. in FloatingMenu package we give you this ability to have connection with your sub-projects.

Table of Contents

• Demo
• Install
• Usage
• Props
• License

Demo

Installation

$ npm install oms-ui-floating-menu
$ yarn add oms-ui-floating-menu

Usage

For use FloatingMenu component in your project

• You need to give a state to open prop and set it false in onClose prop with setOpen.
• After that you must give array to items of IFloatingItem type that must have object with icon, name, color, link, show properties.

<FloatingMenu
  open={open}
  items={[
    {
      icon: <Layers />,
      name: "Page 1",
      color: "#A82C56",
      link: "",
      show: true,
    },
    {
      icon: <Layers />,
      name: "Page 2",
      color: "#028888",
      link: "",
      show: true,
    },
  ]}
  onClose={() => setOpen(false)}
/>

Props

disablePortal?: boolean;

FloatingMenu by default use createPortal method to mounted component beside the body tag. if you want to prevent the portal to mounted in DOM where the component is used, add disablePortal prop to component.

open: boolean;

As you might guess it open is for to understand FloatingMenu when should be opened.

items: IFloatingMenuProps[];

Its the main prop that this component has it. with items you can defined array of buttons that clickable, and when you click it send you to link that is deticated to. every item of items give a name, color to set backgroundColor for it, icon, link and show if you want to that item not visible currently.

Basic

IFloatingMenuProps is type that inherited of FloatingItem component props type

interface IFloatingItemProps
  extends IFloatingItem,
    React.HTMLAttributes<HTMLLIElement> {
  color: string;
}

and extends from IFloatingItem interface.

interface IFloatingItem {
  name: string;
  color: string;
  icon: React.SVGProps<SVGSVGElement>;
  link: string;
  show?: boolean;
}

anchor?: { x: (string | number), y: (string | number) };

With this one you can give position to component on x and y axises from top-left of page.

• when you increase x value, Floating Menu make distance from top of the page
• and increasing y make Floating Menu farther from left and closer to right of the page.

onClose: () => void;

It's for handling the state that you control the open prop with it and for example you can set it false to unmount component.

onClick?: (link: string) => void;

Give you a clicked item's link in onClick callback.

Contribute

If you have a feature request, please add it as an issue or make a pull request.

v0.2.6

• Support disablePortal prop for cancel render component in body tag in DOM.

v0.2.9

• Change FloatingItem component's base tag from <li> to <a> (for new tab option in context menu).

License

Copyright (c) 2021 Airtour