Support iframes

🚀 Feature request

Motivation

Hello there, I am evaluating Reakit to figure out if we can use it at work and one constraint we have is that we render our React application inside of an iframe and that when app code uses globals like document, these should be the iframe’s.

Example

This is one of the many examples:

https://github.com/reakit/reakit/blob/5f51e395835ae1d1c26fc97699d02197db6ba3eb/packages/reakit-utils/src/hasFocusWithin.ts#L1-L4

Here you are referencing the global document. The fix here is easy enough:

export function hasFocusWithin(element: Element) {
  const activeElement = element.ownerDocument.activeElement
  if (!activeElement) return false;
  return element.contains(activeElement);
}

Possible implementations

Basically every time you reference document or window etc you’d need it to get it from an element (ref?) within the frame. Probably another option is to provide those globals via context.

Thanks in advance for your time, and thank you for the library it looks promising!

[diegohaz]

Some progress has been made on this. There are still these lines to update:

https://github.com/reakit/reakit/blob/49db6c007ea82fddf959448328b5f5d572defa40/packages/reakit/src/Portal/Portal.tsx#L13

https://github.com/reakit/reakit/blob/49db6c007ea82fddf959448328b5f5d572defa40/packages/reakit/src/Portal/Portal.tsx#L27

[diegohaz]

Only Portal left now! I’m not sure what to do with that as document is assigned at the module’s top-level scope.

Maybe just let people use PortalContext.Provider and pass their own container element.