@rendr-view/use-scrollsnap-controls

A React hook that provides methods to control scroll-snap carousels.

Installation

``sh yarn add @rendr-view/use-scrollsnap-controls`

`Example usage`

`tsx function Example(props: { itemClassName?: string | string[]; options?: any }) { const ref = React.useRef(null); const controls = useScrollSnapControls(ref, props.options);

return (


      
        
          Slides
          
            Visible: {controls.slides.visible.join(", ")}
          
          
            Wholly visible: {controls.slides.whollyVisible.join(", ")}
          
          Count: {controls.slides.count}
        

        
          
          
        

      

      
        
          Views
          
            Visible: {controls.views.visible.join(", ")}
          
          
            Wholly visible: {controls.views.whollyVisible.join(", ")}
          
          Count: {controls.views.count}
        

        
          
          
        

      

              ref={ref}
        className="carousel relative flex flex-nowrap snap-x snap-mandatory overflow-x-scroll"
      >
        {items.map(i => (
                      key={i}
            className={clsx(
              "slide aspect-video bg-gray-100 border flex justify-center items-center font-bold transition duration-1000 flex-shrink-0",
              {
                "snap-center": true,
                "border-green-200": controls.slides.visible.includes(i),
                "border-green-500": controls.slides.whollyVisible.includes(i)
              },
              className
            )}
          >
            Index {i}

))}

@rendr-view/use-scrollsnap-controls

A React hook that provides methods to control scroll-snap carousels.

Installation

``sh yarn add @rendr-view/use-scrollsnap-controls`

`Example usage`

`tsx function Example(props: { itemClassName?: string | string[]; options?: any }) { const ref = React.useRef(null); const controls = useScrollSnapControls(ref, props.options);

return (


      
        
          Slides
          
            Visible: {controls.slides.visible.join(", ")}
          
          
            Wholly visible: {controls.slides.whollyVisible.join(", ")}
          
          Count: {controls.slides.count}
        

        
          
          
        

      

      
        
          Views
          
            Visible: {controls.views.visible.join(", ")}
          
          
            Wholly visible: {controls.views.whollyVisible.join(", ")}
          
          Count: {controls.views.count}
        

        
          
          
        

      

              ref={ref}
        className="carousel relative flex flex-nowrap snap-x snap-mandatory overflow-x-scroll"
      >
        {items.map(i => (
                      key={i}
            className={clsx(
              "slide aspect-video bg-gray-100 border flex justify-center items-center font-bold transition duration-1000 flex-shrink-0",
              {
                "snap-center": true,
                "border-green-200": controls.slides.visible.includes(i),
                "border-green-500": controls.slides.whollyVisible.includes(i)
              },
              className
            )}
          >
            Index {i}

))}