Skip to content

Implemented container and disablePortal props #665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: v1
Choose a base branch
from

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