@alphasquad/horizontal-scroll-view

Horizontal scroll view. Ability to scroll on drag.

Usage no npm install needed!

<script type="module">
  import alphasquadHorizontalScrollView from 'https://cdn.skypack.dev/@alphasquad/horizontal-scroll-view';
</script>

README

Available Scripts

Horizontal scroll view. Ability to scroll on drag.

npm i @alphasquad/horizontal-scroll-view

OR

yarn add @alphasquad/horizontal-scroll-view

Demo

How to use?

import Horizontal from "@alphasquad/horizontal-scroll-view";

<Horizontal
            data={data} // Array of object
            Component={Item} // Component that is going to be rendered and recieve object from above array
            wrapperClass="customClass"
            scrollLength={100} // How much the scroll should jump on left or right contorl click
            showControls={true}

        />

Item Component


const Item: React.FC<InnerProps> = (props) => {
    let { item } = props;
    return <div className="contentWrapper">
      <img src={item.image} alt=""/>
      <h1>{item.title}</h1>
      <p>{item.content}</p>
    </div>
  };

Props

Props Types Description Required Default
data array Array of object on which the loop will be applied and individual object will be returned to Component true false
Component Component The component on which the loop will be applied and and single object will be passed as props to this component true false
wrapperClass string class will be applied on the wrapping div false -
scrollLength number How much the scroll should jump on left or right contorl click false 40
showControls bool Show/hide left right arrows false false