Function Carousel

examples/app/SimpleCarousel/Carousel.tsx:31–73

(props)

const getInitialState = (numItems: number): CarouselState => ({ pos: numItems - 1, sliding: false, dir: NEXT });

const Carousel: FunctionComponent<{children: ReactNode}> = (props) => {
  const numItems = React.Children.count(props.children);
  const [state, dispatch] = React.useReducer(reducer, getInitialState(numItems));

  const slide = (dir: Direction) => {
    dispatch({ type: dir, numItems });
    setTimeout(() => {
      dispatch({ type: 'stopSliding' });
    }, 50);
  };

  const handlers = useSwipeable({
    onSwipedLeft: () => slide(NEXT),
    onSwipedRight: () => slide(PREV),
    swipeDuration: 500,
    preventScrollOnSwipe: true,
    trackMouse: true
  });

  return (
    <div {...handlers}>
      <Wrapper>
        <CarouselContainer dir={state.dir} sliding={state.sliding}>
          {React.Children.map(props.children, (child, index) => (
            <CarouselSlot
              order={getOrder(index, state.pos, numItems)}
            >
              {child}
            </CarouselSlot>
          ))}
        </CarouselContainer>
      </Wrapper>
      <SlideButtonContainer>
        <SlideButton onClick={() => slide(PREV)} float="left">
          Prev
        </SlideButton>
        <SlideButton onClick={() => slide(NEXT)} float="right">
          Next
        </SlideButton>
      </SlideButtonContainer>
    </div>
  );
};

function reducer(state: CarouselState, action: CarouselAction): CarouselState {
  switch (action.type) {