Merge pull request #7 from faceless-ui/fix/hydration-console-errors

fix: resolves server vs. client inline style differences
faceless-ui · Sep 6, 2022 · 2e4a952 · 2e4a952
2 parents 2729852 + 3cceef6
commit 2e4a952
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/Slide/index.tsx b/src/Slide/index.tsx
@@ -4,6 +4,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
+  useState,
 } from 'react';
 import useSlider from '../useSlider';
 import useIntersection from './useIntersection';
@@ -25,11 +26,12 @@ const Slide: React.FC<SlideProps> = (props) => {
     index,
     htmlElement = 'div',
     children,
-    style,
+    style: styleFromProps,
     onClick: onClickFromProps,
     ...rest
   } = props;
 
+  const [style, setStyle] = useState<React.CSSProperties | undefined>();
   const slider = useSlider();
   const slideRef = useRef<HTMLElement | null>(null);
 
@@ -68,6 +70,17 @@ const Slide: React.FC<SlideProps> = (props) => {
     index,
   ]);
 
+  useEffect(() => {
+    if (scrollSnap) {
+      setStyle({
+        scrollSnapStop: 'always',
+        scrollSnapAlign: 'start',
+      })
+    } else {
+      setStyle(undefined);
+    }
+  }, [scrollSnap]);
+
   const handleClick = useCallback((e: MouseEvent<HTMLElement>) => {
     if (slideOnSelect) {
       goToSlideIndex(index);
@@ -84,20 +97,20 @@ const Slide: React.FC<SlideProps> = (props) => {
   ]);
 
   const Tag = htmlElement as React.ElementType;
+  const mergedStyle = {
+    flexShrink: 0,
+    width: slideWidth,
+    ...style || {},
+    ...styleFromProps || {},
+  }
 
   return (
     <Tag
       {...{
         ref: slideRef,
         onClick: handleClick,
         ...rest,
-        style: {
-          flexShrink: 0,
-          width: slideWidth,
-          scrollSnapAlign: scrollSnap ? 'start' : undefined,
-          scrollSnapStop: scrollSnap ? 'always' : undefined,
-          ...style,
-        },
+        style: mergedStyle,
       }}
     >
       {children && children}

diff --git a/src/SliderProgress/index.tsx b/src/SliderProgress/index.tsx
@@ -15,6 +15,11 @@ export interface SliderProgressProps extends HTMLProps<HTMLElement> {
   indicatorType?: 'width' | 'position'
 }
 
+type SegmentStyle = {
+  width?: string
+  left?: string
+}
+
 const SliderProgress: React.FC<SliderProgressProps> = (props) => {
   const {
     htmlElement: Tag = 'div',
@@ -29,10 +34,7 @@ const SliderProgress: React.FC<SliderProgressProps> = (props) => {
     ...rest
   } = props;
 
-  const [segmentStyle, setSegmentStyle] = useState({
-    width: '',
-    left: '',
-  });
+  const [segmentStyle, setSegmentStyle] = useState<SegmentStyle | undefined>(undefined);
 
   const {
     scrollRatio,
@@ -45,14 +47,12 @@ const SliderProgress: React.FC<SliderProgressProps> = (props) => {
   } = useSlider();
 
   useEffect(() => {
-    const newSegmentStyle = {
-      width: '',
-      left: '',
-    };
+    let newSegmentStyle: SegmentStyle | undefined;
 
     const { current: track } = sliderTrackRef;
 
     if (track) {
+      newSegmentStyle = {};
       const trackWidth = track.offsetWidth;
       const scrollOffsetRatio = scrollOffset > 0 ? ((trackWidth / scrollOffset) / 100) : 0;
 
@@ -100,7 +100,7 @@ const SliderProgress: React.FC<SliderProgressProps> = (props) => {
           position: 'absolute',
           top: 0,
           height: '100%',
-          ...segmentStyle,
+          ...segmentStyle || {},
           ...indicatorStyle || {},
         }}
       />