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 |