How to position React Material UI Popper in the bottom right corner of the browser with JavaScript?

Sometimes, we want to position React Material UI Popper in the bottom right corner of the browser with JavaScript.

In this article, we’ll look at how to position React Material UI Popper in the bottom right corner of the browser with JavaScript.

How to position React Material UI Popper in the bottom right corner of the browser with JavaScript?

To position React Material UI Popper in the bottom right corner of the browser with JavaScript, we can set the popper’s modifiers prop.

For instance, we write:

import React from "react";
import Popper from "@material-ui/core/Popper";
import Button from "@material-ui/core/Button";

export default function App() {
  const [anchorEl, setAnchorEl] = React.useState();

  return (
    <div>
      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>open</Button>
      <Popper
        className="popper-root"
        open={!!anchorEl}
        anchorEl={anchorEl}
        placement="bottom-end"
        modifiers={{
          offset: {
            enabled: true,
            offset: "0, 30"
          }
        }}
      >
        <div>hello</div>
      </Popper>
    </div>
  );
}

We set the modifiers prop to an object that has the offset property.

The property is set to an object that has enabled set to true to enable offset of the position.

Then we set offset to '0, 30' to move the popper down by 30px.

Conclusion

To position React Material UI Popper in the bottom right corner of the browser with JavaScript, we can set the popper’s modifiers prop.