Skip to content

Conversation

NickCis
Copy link

@NickCis NickCis commented Apr 5, 2025

The objetive of this PR is to allow a container (and an optional disablePortal) prop in order to control where the portal element will be rendered.

The implementation was taken from Material UI's Portal component.

This implementation addresses some old issues:

I particularly implemented the feature in order to be able to use reactor in a fullscreen element (similarly to #221 ). If a element is displayed in fullscreen (using the browser's requestFullscreen method reactor won't work as the portal will be rendered in document.body. This issue is fixed passing document.fullscreenElement as the container property to the Tour component. You can check the following example:

function useFullscreenElement() {
  const [fullscreenElement, setFullscreenElement] = useState(
    document?.fullscreenElement
  );
  useEffect(() => {
    const handler = () => {
      setFullscreenElement(document.fullscreenElement);
    };

    document.addEventListener("fullscreenchange", handler);

    return () => {
      document.removeEventListener("fullscreenchange", handler);
    };
  }, []);

  return fullscreenElement;
}

function Component() {
  const fullscreenElement = useFullscreenElement();
  return (
    <Tour
      container={fullscreenElement || document.body}
      { ... }
    />
  );
}

For anyone needing to use this right now it is published on npm under my user's scope: @nickics/reactour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant