@alphasquad/horizontal-scroll-view/README.md

Horizontal scroll view.

## Available Scripts

Horizontal scroll view. Ability to scroll on drag.
````
npm i @alphasquad/horizontal-scroll-view

OR

yarn add @alphasquad/horizontal-scroll-view
````

### Demo

![](https://alpha-squad-docs.s3.amazonaws.com/images/demo.gif)

### 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 |