Popover

The RhPopover is a customizable popover UI element. It can be used to display contextual information, dropdown menus, or other content that should appear in response to user actions.

Usage

Once installed, you can import the RhPopover component into your React application:

copy

import {RhPopover} from "@rhythm-ui/react"

Then, you can use the RhPopover component in your JSX code:

copy

function Default() {
  const [open, setOpen] = useState(false);

  const togglePopover = () => setOpen(!open);

  return (
    <RhPopover isOpen={open}>
      <RhPopoverToggle>
        <RhButton onClick={togglePopover} variant="primary">
          Dropdown
        </RhButton>
      </RhPopoverToggle>
      <RhPopoverMenu>
        <RhCard>
          <RhListContainer>
            <RhListItem onClick={() => null}>
              <RhListItemText
                primary="Bonnie Green"
                secondary="bonnie@green.com"
              />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Dashboard" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Settings" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Earnings" />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Sign Out" />
            </RhListItem>
          </RhListContainer>
        </RhCard>
      </RhPopoverMenu>
    </RhPopover>
  );
}

Popover Props

Name	Type	Default	Description
initialOpen	boolean		Determines whether to keep Popover in an open state initially or not
placement	Placement		Provides a variety of options for positioning, including top, bottom, left, right, and center.
modal	boolean	false	Determines the modal
isOpen	boolean		Determines whether to keep Popover in an open state or not
indexValue	number		to set the z-index value
onToggle	(isOpen: boolean) => void		Function that toggles the value of isOpen prop

Modal Placement

The placement prop takes a Placement value and provides a variety of options for positioning the Popover, including top, bottom, left, right, and center.

copy

function Placement() {
  const [open, setOpen] = useState(false);

  const togglePopover = () => setOpen(!open);

  return (
    <RhPopover isOpen={open} placement="right">
      <RhPopoverToggle>
        <RhButton onClick={togglePopover} variant="primary">
          Dropdown
        </RhButton>
      </RhPopoverToggle>
      <RhPopoverMenu>
        <RhCard>
          <RhListContainer>
            <RhListItem onClick={() => null}>
              <RhListItemText
                primary="Bonnie Green"
                secondary="bonnie@green.com"
              />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Dashboard" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Settings" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Earnings" />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Sign Out" />
            </RhListItem>
          </RhListContainer>
        </RhCard>
      </RhPopoverMenu>
    </RhPopover>
  );
}

Controlled

The RhPopover is used to display contextual information. And Here it is an Interactive popover that is asking the user to choose the decision.

copy

function Controlled() {
  const [open, setOpen] = useState(false);

  const togglePopover = () => setOpen(!open);

  return (
    <RhPopover isOpen={open} placement="right">
      <RhPopoverToggle>
        <RhButton onClick={togglePopover} variant="primary">
          Dropdown
        </RhButton>
      </RhPopoverToggle>
      <RhPopoverMenu>
        <RhCard className="w-96">
          <RhCardBody className="flex flex-col gap-2">
            <div className="text-lg font-medium dark:text-gray-200">
              Confirm deletion
            </div>
            <div className="dark:text-gray-400">
              {
                "Are you sure you want to delete these items? You won't be able to recover them."
              }
            </div>
            <div className="flex gap-4 justify-end">
              <RhButton variant="secondary" onClick={togglePopover}>
                Cancel
              </RhButton>
              <RhButton onClick={togglePopover}>Save</RhButton>
            </div>
          </RhCardBody>
        </RhCard>
      </RhPopoverMenu>
    </RhPopover>
  );
}

Handle Outside Click

The onToggle prop is a function that takes a boolean value representing the open/closed state of the Popover and is called whenever the user toggles the Popover. And Popover will close when we click on outside.

copy

function HandleOutsideClick() {
  const [open, setOpen] = useState(false);

  const togglePopover = () => setOpen(!open);

  return (
    <RhPopover isOpen={open} onToggle={togglePopover}>
      <RhPopoverToggle>
        <RhButton onClick={togglePopover} variant="primary">
          Dropdown
        </RhButton>
      </RhPopoverToggle>
      <RhPopoverMenu>
        <RhCard>
          <RhListContainer>
            <RhListItem onClick={() => null}>
              <RhListItemText
                primary="Bonnie Green"
                secondary="bonnie@green.com"
              />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Dashboard" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Settings" />
            </RhListItem>
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Earnings" />
            </RhListItem>
            <RhDivider />
            <RhListItem onClick={() => null}>
              <RhListItemText primary="Sign Out" />
            </RhListItem>
          </RhListContainer>
        </RhCard>
      </RhPopoverMenu>
    </RhPopover>
  );
}

Nested Popover

The RhFloatingTree Provides context for nested floating elements when they are not children of each other on the DOM..
A nested floating element may look like the following, where there is a popover inside the content of another one:
Usage of this component must be wrapped within a single FloatingTree component as seen in the previous code snippet:

copy

function NestedPopover() {
  const [open, setOpen] = useState(false);
  const [innerPopOver, setInnerPopOver] = useState(false);
  return (
      <RhFloatingTree>
        <RhPopover onToggle={setOpen} isOpen={open}>
          <RhPopoverToggle onClick={() => setOpen(!open)}>
            <RhButton>Popover trigger</RhButton>
          </RhPopoverToggle>
          <RhPopoverMenu>
            <RhCard>
              <RhListContainer>
                <RhListItem
                  onClick={() => null}
                  className="flex items-center justify-between"
                >
                  <RhListItemText primary="Earnings" />
                </RhListItem>
                <RhListItem
                  onClick={() => null}
                  className="flex items-center justify-between"
                >
                  <RhListItemText primary="Setting" />
                </RhListItem>
                <RhListItem
                  className="flex items-center justify-between"
                  onClick={() => null}
                >
                  <RhPopover
                    onToggle={setInnerPopOver}
                    isOpen={innerPopOver}
                    placement="right-end"
                  >
                    <RhPopoverToggle
                      className="flex items-center justify-between gap-4"
                      onClick={() => {
                        console.log("clicked");
                        setInnerPopOver(!innerPopOver);
                      }}
                    >
                      <span>Dashboard</span>
                      {innerPopOver ? (
                        <RhIcon icon="heroicons:chevron-right" />
                      ) : (
                        <RhIcon icon="heroicons:chevron-down" />
                      )}
                    </RhPopoverToggle>
                    <RhPopoverMenu>
                      <RhCard>
                        <RhListContainer>
                          <RhListItem
                            onClick={() => null}
                            className="flex items-center justify-between"
                          >
                            <RhListItemText primary="Yearly Dashboard" />
                          </RhListItem>
                          <RhListItem
                            onClick={() => null}
                            className="flex items-center justify-between"
                          >
                            <RhListItemText primary="Monthly Dashboard" />
                          </RhListItem>
                        </RhListContainer>
                      </RhCard>
                    </RhPopoverMenu>
                  </RhPopover>
                </RhListItem>
              </RhListContainer>
            </RhCard>
          </RhPopoverMenu>
        </RhPopover>
      </RhFloatingTree>
  );
}