fix: store support for object-fit in ref to prevent slider from alway…

…s using fallback in SSR scenarios

src/index.tsx

@@ -6,9 +6,8 @@ export {
 } from './react-compare-slider';
 
 export {
-  CLIENT_SUPPORTS_CSS_OBJECT_FIT,
   ReactCompareSliderImage,
   ReactCompareSliderImageProps,
 } from './react-compare-slider-image';
 
-export { styleFitContainer } from './utils';
+export { styleFitContainer, supportsCssObjectFit } from './utils';

src/react-compare-slider-image.tsx

@@ -1,14 +1,6 @@
-import React from 'react';
+import React, { useRef } from 'react';
 
-import { styleFitContainer } from './utils';
-
-/**
- * Whether client supports the CSS `object-fit` property.
- */
-export const CLIENT_SUPPORTS_CSS_OBJECT_FIT: boolean =
-  typeof CSS !== 'undefined' &&
-  CSS.supports &&
-  CSS.supports('object-fit', 'cover');
+import { styleFitContainer, supportsCssObjectFit } from './utils';
 
 /**
  * Properties for `ReactCompareSliderImage`.
@@ -31,14 +23,16 @@ export const ReactCompareSliderImage: React.FC<React.ImgHTMLAttributes<
   style,
   ...props
 }): React.ReactElement => {
+  /** Runtime support for `object-fit`. Ref based to allow updates after SSR. */
+  const objectFitIsSupported = useRef(supportsCssObjectFit());
   const innerStyle: React.CSSProperties = styleFitContainer({ ...style });
   const containerStyle: React.CSSProperties = {
     width: innerStyle.width,
     height: innerStyle.height,
   };
 
   // Add fallback background props if requested
-  if (!CLIENT_SUPPORTS_CSS_OBJECT_FIT && fallbackEnable) {
+  if (!objectFitIsSupported && fallbackEnable) {
     // Set fallback CSS properties, use props from `innerStyle` if defined
     containerStyle.backgroundImage =
       innerStyle.backgroundImage || `url(${props.src})`;

src/utils.ts

@@ -8,6 +8,14 @@ import {
 import { ResizeObserver } from 'resize-observer';
 import { ContentRect } from 'resize-observer/lib/ContentRect';
 
+/**
+ * Whether client supports the CSS `object-fit` property.
+ */
+export const supportsCssObjectFit = (): boolean =>
+  typeof CSS !== 'undefined' &&
+  CSS.supports &&
+  CSS.supports('object-fit', 'cover');
+
 /**
  * Stand-alone CSS utility to make replaced elements (`img`, `video`, etc.)
  * fit their container and maintain their aspect ratio.