Use custom browsing context instead of global window object if provided

[martin-pettersson]

I ran into a scenario where I needed to use this library in a popup window and the easiest solution was to render the component using a React portal. The issue then was that this library was listening for events on the "origin" window object instead of the popup window.

If we allow users to pass in a custom browsing context as a prop it's fairly easy to solve this issue. Here's a trivial example with some sudo-ish code to illustrate the solution.

const browsingContext = window.open("", "", "popup");

return createPortal(
    <ReactCompareSlider browsingContext={browsingContext} ...>
        ...
    </ReactCompareSlider>,
    browsingContext.document.body
);

I couldn't for the life of me get the storybook to run locally without any errors so I didn't create any additional documentation, examples or tests. Since this solution falls back to the global window object if no browsing context is provided this doesn't break anything.

If you need any additional explanation of examples please let me know.

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @nerdyman on Vercel.

@nerdyman first needs to authorize it.

[nerdyman]

Thanks for opening this @martin-pettersson, it's a cool use case!

The code LGTM and thanks for updating the docs too 🙌

I haven't done much with binding to alternate event targets before, If you're able to provide the code you tried in Storybook I'll take a look and see if I can figure something out for the tests.

Edit: It looks like this is breaking the SSR Tests. I think it's because it's referring to window directly in the function params like browserContext = window but window isn't a thing on the server. References to window were only in callback functions before so things rendered ok on the server.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compare-slider	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2024 0:04am

[martin-pettersson]

I tried just running the Storybook without any changes but couldn't get it up and running locally. I can try again in a bit but please see if these changes fixes the SSR tests. I tried assigning the default value when the component is created instead.

[nerdyman]

Hey @martin-pettersson, sorry for the delay in getting this reviewed. I pulled down your branch and found that you can use globalThis as the default forbrowsingContext safely on the client and server.

[martin-pettersson]

Good idea! I've implemented your suggestions. I'm sorry I can't run the tests locally.

[nerdyman]

Thanks for your PR @martin-pettersson! I've been pretty busy recently so haven't been able to give the repo as much attention as I'd like. I'll drop a message when the release goes out.

[nerdyman]

Still need to do some more testing on this so have published a prerelease https://github.com/nerdyman/react-compare-slider/releases/tag/v3.0.2-1

[nerdyman]

This was released in 3.1.0 🥳