1. Most importantly, I wanted it to feel as reusable as a component library's offering. It should be simple and declarative to drop in anywhere on the DOM with minimal wiring to be done in the parent component.
2. It should be easily and intuitively customized, with minimal constraints on what kind of content can populate a slide.
3. Though it should operate independently, the consumer should be able to synchronize separate content with changes to active slides.

1
2
3
4
5
6
const Consumer = () => (
  <Slideshow {...containerProps}>
    <Slideshow.Slide {...someProps}>Some Content<Slideshow.Slide>
    <Slideshow.Slide {...otherProps}>Different Content</Slideshow.Slide>
  </Slideshow>
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Iteration One Example

const Slideshow = ({ onChange }) => {
  const [activeIdx, setActiveIdx] = useState(0);
  const [scrollContainer, ref, scroll] = useScrollContainer();

  const triggerScroll = (isRight) => {
    direction = isRight ? 1 : -1;
    // trigger scroll in dom
    scroll({ left: direction * scrollContainer?.offsetWidth });

    // update state and fire state change event
    setActiveIdx((current) => {
      const nextIdx = current + direction;
      onChange?.(nextIdx);
      return nextIdx;
    });
  }

  // ... render
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// Iteration Two Example

const Slideshow = ({ onChange }) => {
  const [activeIdx, setActiveIdx] = useState(0);
  const [scrollContainer, ref, scroll] = useScrollContainer();

  // listen for scrolls
  useEffect(() => {
    if (scrollContainer) {
      const scrollDistance = scrollContainer.offsetWidth
      const updateIdx = (currScroll) => {
        const idx = Math.floor(
          (currScroll + scrollDistance / 3) / scrollDistance
        );
        if (idx != activeIdx) {
          setActiveIdx(idx);
          onChange?.(idx);
        }
      };

      // set index on initial render
      updateIdx(scrollContainer.scrollLeft);

      // function to handle index updates on scroll
      const onScroll = ({ target }) => {
        updateIdx(target?.scrollLeft);
      };

      // add scroll handler to scrollContainer
      scrollContainer.addEventListener("scroll", onScroll);

      // remove event listener on dismount
      return () => scrollContainer.removeEventListener("scroll", onScroll);
    }
  }, [scrollContainer, activeIdx, onChange]);

  const triggerScroll = (isRight) => {
    direction = isRight ? 1 : -1;
    // trigger scroll in dom
    scroll({ left: direction * scrollContainer?.offsetWidth });
  };

  // ... render
};

1. Stylistic flexibility: it was convenient for me to constrain the slideshow to a square aspect ratio and bake specific buttons into the component itself, since these would save me time in future consuming use cases. However, it's likely another product would not want these features at all. A more future proof way of writing this component from the beginning with regard to these decisions might have been to pull these specifics into a composing parent component, so at a lower level a more generic component would exist.
2. Performance: since I never have that many slides, it's fine to render them all in the browser in one go. This is doubly okay considering Gatsby's IntersectionObserver based image lazy-loading. However, in the absence of such a feature, or with sufficient numbers, it would not make sense to render variable-size N images all at once. Instead, a more performant component would lazy load a sliding window of content around its active index.