Add autoRefreshCondition optional prop to useSnapCarousel

[suniahk]

What does this add?

This adds a new prop, autoRefreshCondition ?: () => boolean = () => true;. This prop lets an implementation enable or disable uncontrolled refreshes, e.g. on scroll, on resize, etc.

Why is this important?

Allowing implementation control of auto-refresh enables more fine-grained control over the application's UI state. Additionally, the overhead required to add this functionality is minimal.

Example Use Case

The main reason I added this was to allow switching between a carousel view and an "expanded" view. This really only toggles a class that adds flex-wrap: wrap; to the carousel. I also want to be able to hide this functionality when the expanded view isn't required, and to do so, I rely on pages.length (when pages.length > 1, show the toggle). The downside here is that if I add wrapping to the carousel and the layout changes, pages.length automatically changes to 1 and I can no longer access the toggle from that point forward. Being able to disable uncontrolled refreshes will enable this use case.

[richardscarrott]

Thanks for the PR and for the detailed description, sounds like a reasonable change.

Is there a specific reason you need a function to disable the behaviour? Perhaps instead you could just pass in a boolean option like this:

const [view, setView] = useState<'carousel' | 'expanded'>('carousel');
const { ref } = useSnapCarousel({
  autoRefresh: view === 'carousel'
});

That way we can avoid attaching the various events if it's false? With a function, I'm a little worried it'll trip people up if they forget to maintain a stable identity with useCallback.

The only reason I can think a function would be necessary is if the condition depended on state outside of react, e.g. a mutable ref?