templates

Browser Warning

Use the browser warning to detect outdated browsers and advises users to upgrade to a new version.

Modal

There is a Modal version available and a smaller warning using the InfoBar component.

In cases the applications works with minor restrictions and you just want to inform the user you can show a <InfoBar />.

Expand code

Editable Example

() => {
  const [open, setOpen] = useState(false);
  // should be default true in production, use localstorage to persist

  const isIE = () => {
    var ua = window.navigator.userAgent; //Check the userAgent property of the window.navigator object
    var msie = ua.indexOf("MSIE "); // IE 10 or older
    var trident = ua.indexOf("Trident/"); //IE 11
    //Remove this line in production and use second line
    return true;
    //return msie > 0 || trident > 0;
  };

  const toggleModal = () => {
    setOpen(!open);
  };

  if (isIE())
    return (
      <>
        <Button onClick={toggleModal}>
          Manually open warning modal
        </Button>
        <Modal
          open={open}
          primaryButtonText="Continue with current browser"
          onRequestSubmit={() => submitAndClose()}
          modalHeading="Outdated browser"
          onRequestClose={toggleModal}
          danger
        >
          <p className="wfp--modal-content__text">
            It looks like you are using Internet
            Explorer 11 or older as your favourite
            browser. We recommend that you switch to a
            more modern browser to ensure that you get
            the best experience out of this
            application.{" "}
            <Link href="#">
              Learn more on go.wfp.org.
            </Link>
          </p>
        </Modal>
      </>
    );
  return null;
};

InfoBar

Use the InfoBar component to display a minor warning. Only display the warning if the user is still able to use the application with the current browser.

Editable Example

<InfoBar>
  Your browser version is outdated.{" "}
  <Link href="#">Please upgrade</Link>
</InfoBar>;

On this page

References