### Install react-horizontal-slider with NPM

Source: https://github.com/thecoolnerd27/react-horizontal-slider/blob/master/README.md

Use this command to install the library via NPM.

```bash
npm install react-horizontal-slider --save
```

--------------------------------

### Install react-horizontal-slider with Yarn

Source: https://github.com/thecoolnerd27/react-horizontal-slider/blob/master/README.md

Use this command to install the library via Yarn.

```bash
yarn add react-horizontal-slider
```

--------------------------------

### Installing Peer Dependencies

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Install the required peer dependencies separately if they are not already present in your project.

```javascript
// Required peer dependencies (install separately if not already present)
// react, reactstrap, bootstrap, jquery, styled-components, simplebar-react
npm install reactstrap bootstrap jquery styled-components simplebar-react
```

--------------------------------

### Installation using npm and yarn

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Install the react-horizontal-slider package using either npm or yarn.

```bash
# npm
npm install react-horizontal-slider --save
```

```bash
# yarn
yarn add react-horizontal-slider
```

--------------------------------

### Using HorizontalSlider Component with Data

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Demonstrates how to import and use the HorizontalSlider component with sample product data. It shows examples of both custom dimensions and default dimensions, and how to manage multiple independent sliders using unique IDs. Navigation arrows are hidden on mobile screens.

```jsx
import React from 'react';
import HorizontalSlider from 'react-horizontal-slider';

// Data array: each object maps to one card in the slider
const products = [
  {
    url: 'https://via.placeholder.com/600/771796',   // required: card image source
    title: 'Wireless Headphones',
    cost: '$49.99',
    company: 'SoundCo',
    desc: 'Noise-cancelling over-ear headphones.',
  },
  {
    url: 'https://via.placeholder.com/600/24f355',
    title: 'Bluetooth Speaker',
    cost: '$29.99',
    company: 'AudioBrand',
    desc: 'Portable waterproof speaker.',
  },
  {
    url: 'https://via.placeholder.com/600/d32776',
    title: 'USB-C Hub',
    cost: '$19.99',
    company: 'TechPlus',
    desc: '7-in-1 USB-C multiport adapter.',
  },
];

function App() {
  return (
    <div>
      {/* Single slider with custom dimensions */}
      <HorizontalSlider
        title="Featured Products"
        data={products}
        width={320}
        height={300}
        id="1"
      />

      {/* Second independent slider using default dimensions (300×320) */}
      <HorizontalSlider
        title="New Arrivals"
        data={products}
        id="2"
      />
    </div>
  );
}

export default App;
// Each slider renders left/right arrow buttons that animate-scroll through cards.
// On screens ≤768px the arrows are hidden; native touch/trackpad scroll takes over.
```

--------------------------------

### Multiple Independent Sliders Example

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Render multiple HorizontalSlider instances on a single page, ensuring each has a unique 'id' prop to maintain independent scroll states.

```jsx
import React from 'react';
import HorizontalSlider from 'react-horizontal-slider';
import moviesData from './data/movies';
import seriesData from './data/series';
import gamesData  from './data/games';

export default function Catalog() {
  return (
    <div className="catalog">
      {/* Each id must be unique across the page */}
      <HorizontalSlider title="Movies"      data={moviesData} id="movies"  width={280} height={340} />
      <HorizontalSlider title="TV Series"   data={seriesData} id="series"  width={280} height={340} />
      <HorizontalSlider title="Video Games" data={gamesData}  id="games"   width={280} height={340} />
    </div>
  );
}
// Each slider maintains independent scroll state.
// Clicking "›" on "Movies" will not move "TV Series" or "Video Games".
```

--------------------------------

### HorizontalSlider Component Usage

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Demonstrates how to import and use the HorizontalSlider component with sample data and different prop configurations.

```APIDOC
## HorizontalSlider Component Usage

### Description
This example shows how to import the `HorizontalSlider` component and use it with an array of product data. It illustrates setting custom `width` and `height` props, as well as using the `id` prop for independent slider instances.

### Code Example
```jsx
import React from 'react';
import HorizontalSlider from 'react-horizontal-slider';

// Data array: each object maps to one card in the slider
const products = [
  {
    url: 'https://via.placeholder.com/600/771796',   // required: card image source
    title: 'Wireless Headphones',
    cost: '$49.99',                                  // optional: price label
    company: 'SoundCo',
    desc: 'Noise-cancelling over-ear headphones.',   // optional: body text
  },
  {
    url: 'https://via.placeholder.com/600/24f355',
    title: 'Bluetooth Speaker',
    cost: '$29.99',
    company: 'AudioBrand',
    desc: 'Portable waterproof speaker.',
  },
  {
    url: 'https://via.placeholder.com/600/d32776',
    title: 'USB-C Hub',
    cost: '$19.99',
    company: 'TechPlus',
    desc: '7-in-1 USB-C multiport adapter.',
  },
];

function App() {
  return (
    <div>
      {/* Single slider with custom dimensions */}
      <HorizontalSlider
        title="Featured Products"
        data={products}
        width={320}
        height={300}
        id="1"
      />

      {/* Second independent slider using default dimensions (300×320) */}
      <HorizontalSlider
        title="New Arrivals"
        data={products}
        id="2"
      />
    </div>
  );
}

export default App;
```

### Notes
- The `id` prop is required when using multiple sliders on the same page to ensure independent scrolling behavior.
- On screens with a width of 768px or less, navigation arrows are hidden, and the slider becomes touch-scrollable.
```

--------------------------------

### Importing the Component

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Import the HorizontalSlider component in your entry point file.

```javascript
// Entry point — import the component
import HorizontalSlider from 'react-horizontal-slider';
```

--------------------------------

### Data Object Format for Slider Items

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Defines the structure for individual items within the 'data' array prop. 'url' and 'title' are mandatory for each item. Additional fields like 'cost', 'company', and 'desc' enrich the card's content.

```js
// Minimal item — only required fields
const minimalItem = {
  url: 'https://via.placeholder.com/600/810b14',
  title: 'Product Name',
};

// Full item — all supported fields
const fullItem = {
  url: 'https://via.placeholder.com/600/810b14',   // Card image source URL
  title: 'Premium Sneakers',
  cost: '$89.99',
  company: 'RunFast Inc.',
  desc: 'Lightweight running shoes for all terrain.',
};

const items = [minimalItem, fullItem /*, ...more items */];
```

--------------------------------

### HorizontalSlider Props Reference

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Detailed reference for the props accepted by the HorizontalSlider component, including their types and whether they are required.

```APIDOC
## HorizontalSlider Component Props

### Description
The `HorizontalSlider` component accepts the following props to configure its appearance and behavior.

### Props
- **id** (`String`): Required. A unique identifier for each slider instance. This is crucial for managing multiple sliders on the same page.
- **data** (`Array`): Required. An array of data objects, where each object represents a card to be displayed in the slider. See the 'Data Object Format' section for details.
- **title** (`String`): Optional. A heading displayed above the slider.
- **width** (`Number`): Optional. The width in pixels for each card. Defaults to `300px`.
- **height** (`Number`): Optional. The height in pixels for each card. Defaults to `320px`.
```

--------------------------------

### Data Object Format

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Specifies the structure of the data objects required for each card within the slider.

```APIDOC
## Data Object Format

### Description
Each object within the `data` array prop corresponds to a single card in the horizontal slider. The `url` and `title` fields are mandatory.

### Data Fields
- **url** (`String`): Required. The source URL for the card's image.
- **title** (`String`): Required. The main title text for the card.
- **cost** (`String`): Optional. The price or cost information to display on the card.
- **company** (`String`): Optional. The company name or subtitle for the card.
- **desc** (`String`): Optional. A description or body text for the card.

### Example
```js
// Minimal item — only required fields
const minimalItem = {
  url: 'https://via.placeholder.com/600/810b14',
  title: 'Product Name',
};

// Full item — all supported fields
const fullItem = {
  url: 'https://via.placeholder.com/600/810b14',
  title: 'Premium Sneakers',
  cost: '$89.99',
  company: 'RunFast Inc.',
  desc: 'Lightweight running shoes for all terrain.',
};

const items = [minimalItem, fullItem];
```
```

--------------------------------

### Internal Scroll Method Implementation

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

This is an internal method used for animating the scroll position of the slider. It calculates half the visible width and animates scrollLeft by that amount. Understanding this is useful for debugging or extending the component.

```javascript
scroll(direction) {
  // direction: -1 scrolls left, +1 scrolls right
  let far = $(`.menu${this.props.id}`).width() / 2 * direction;
  let pos = $(`.menu${this.props.id}`).scrollLeft() + far;
  $(`.menu${this.props.id}`).animate({ scrollLeft: pos }, 800); // 800ms ease animation
}
```

--------------------------------

### Basic Usage of HorizontalSlider Component

Source: https://github.com/thecoolnerd27/react-horizontal-slider/blob/master/README.md

Import and render the HorizontalSlider component in your React application. Multiple sliders can be added with unique IDs.

```javascript
import HorizontalSlider from 'react-horizontal-slider'
export default class App extends React.Component {
 //other logic
    render() {
	 return(
	  <HorizontalSlider
	     title="Menu 1"
	     data={items1}
	     height={300}
	     width={300}
	     id={1} 
	     />
	 //You can add Multiple Sliders if you want    
	<HorizontalSlider
	     title="Menu 2"
	     data={items2}
	     height={400}
	     width={350}
	     id={2} 
	     />
	 );
    }
 }
```

--------------------------------

### HorizontalSlider Component Props Reference

Source: https://context7.com/thecoolnerd27/react-horizontal-slider/llms.txt

Reference for the props accepted by the HorizontalSlider component. The 'id' and 'data' props are required. 'width' and 'height' control card dimensions, defaulting to 300px and 320px respectively.

```jsx
<HorizontalSlider
  id="1"           // {String}  Required. Unique identifier per slider instance.
  data={items}     // {Array}   Required. Array of item objects (see data format below).
  title="Menu 1"  // {String}  Optional. Heading displayed above the slider.
  width={300}      // {Number}  Optional. Width in px of each card. Default: 300.
  height={320}     // {Number}  Optional. Height in px of each card. Default: 320.
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.