Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useFullscreen hooks on custom element always returns false

See original GitHub issue

What package has an issue

@mantine/hooks

Describe the bug

When using the use-fullscreen hook on a Custom root element, the fullscreen property is always false.

const { ref: videoFullscreenRef, toggle, fullscreen } = useFullscreen();

// fulscreen is always false

return (
 <PlayerWrapper ref={videoFullscreenRef}>
   {/* rest of children */}
   <button>{fullscreen ? <FiMinimize2 /> : <FiMaximize2 />}</button>
 </PlayerWrapper>
)

In which browser did the problem occur

Chrome Version 99.0.4844.84 (Official Build) (x86_64)

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

Are you willing to participate in fixing this issue and create a pull request with the fix

Yes

Possible fix

No response

Issue Analytics

State:
Created a year ago
Comments:8 (8 by maintainers)

Top GitHub Comments

1reaction

rtivitalcommented, Apr 24, 2022

Fix was merged and released

0reactions

eltongonccommented, Apr 9, 2022

Done https://github.com/mantinedev/mantine/pull/1212

Top Results From Across the Web

react-use/useFullscreen.md at master - GitHub

Display an element full-screen, optional fallback for fullscreen video on iOS. ... toggle] = useToggle(false); const isFullscreen = useFullscreen(ref, show, ...

Say Hello to React Browser Hooks - NearForm

'React Browser Hooks' is an Open Source library containing several custom hooks that integrate with common browser functionality.

How to play HTML5 Video in full screen on button click in react js

I'm trying to show video in fullscreen on click of external button.I tried with ref and document.getElementByid() .It was throwing error for ...

useFullscreen — Display an Element or Video Full-screen

In this React Hooks tutorial, we'll learn about useFullscreen — Display an element full-screen, optional fallback for fullscreen video on iOS.

react-use | Yarn - Package Manager

useDefault — returns the default value when state is null or undefined . useGetSet — returns state getter get() instead of raw state....