react-tech-slider/README.md

Reusable React component slider for showcasing brands

# 📛 react-tech-slider

A reusable and customizable **React slider component** for showcasing brand logos or tech stacks with smooth animation.
It is backward-compatible: `<Slider brandsList={...} />` keeps the current running behavior, and omitting `variant` defaults to `running`.

---


## 🚀 Installation

```bash
npm install react-tech-slider
```

```bash
pnpm add react-tech-slider
```

---


## 🌐 Live Demo

👉 [View Demo](https://react-tech-slider-demo-git-main-t0n1-devs-projects.vercel.app/)

---


## ✅ Default usage (running)

Import the stylesheet once in your app entry:

```tsx
import "react-tech-slider/styles.css";
import { Slider } from 'react-tech-slider';

const brands = [
  {
    id: 1,
    name: 'Nike',
    img: 'https://img.icons8.com/ios-filled/500/nike.png'
  },
  {
    id: 2,
    name: 'Adidas',
    img: 'https://img.icons8.com/ios/500/adidas-trefoil.png'
  },
  {
    id: 3,
    name: 'Jordan',
    img: 'https://img.icons8.com/ios/500/air-jordan.png'
  }
];

<Slider brandsList={brands} />
```

You can also make the running mode explicit:

```tsx
<Slider brandsList={brands} variant="running" />
```

---


## 🌫️ Fades variant

```tsx
<Slider
  brandsList={brands}
  variant="fades"
  gap={24}
  iconWidth={6}
  speed={1.5}
/>
```

- `variant="fades"` switches to the fade slider.
- `speed` is a positive multiplier: `2` is twice as fast, `0.5` is half speed.
- Invalid or non-positive `speed` values fall back to `1`.

---


## ✨ Props

### Shared props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `brandsList` | `Brand[]` | ✅ | — | Array of brands to render |
| `variant` | `running` or `fades` | ❌ | `running` | Selects the slider mode; omitted defaults to running |
| `iconWidth` | `number` | ❌ | — | Global icon width in `rem` when an item does not define its own width |

### Running props (`variant="running"`)

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `borderColor` | `string` | ❌ | `#7c05d8` | Top/bottom border color |
| `backgroundColor` | `string` | ❌ | `#00000033` | Background color |
| `borderWidth` | `number` | ❌ | `1` | Border thickness in pixels |
| `isPlay` | `boolean` | ❌ | `true` | Whether the running animation is active |
| `pauseOnHoverActive` | `boolean` | ❌ | `false` | Pauses the running animation on hover |
| `durationMs` | `number` | ❌ | `30000` | Full running cycle duration in milliseconds |

### Fades props (`variant="fades"`)

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `gap` | `number` | ❌ | — | Space between columns in pixels |
| `speed` | `number` | ❌ | `1` | Positive multiplier for the full fade animation speed |

### Brand interface

```ts
interface Brand {
  id: number;
  name: string;
  img: string;
  width?: number; // rem
  height?: number; // rem
  style?: React.CSSProperties;
  className?: string;
}
```

- `width` and `height` are in `rem`.
- `style` and `className` apply to the rendered `<img>` in both variants.

---


## 🎨 Customization notes

- Running mode keeps the current CSS slider behavior.
- Fades mode rotates the brands through stacked columns with unique animation names per instance.
- Both variants keep the same `Brand` shape and image customization support.
- `variant` is optional; if omitted, the component stays on `running`.

---


## 🧪 Examples

### Running

```tsx
<Slider
  brandsList={brands}
  variant="running"
  borderWidth={2}
  borderColor="#0cf"
  backgroundColor="#eef"
  iconWidth={6}
  isPlay={true}
  pauseOnHoverActive={true}
  durationMs={20000}
/>
```

### Fades

```tsx
<Slider
  brandsList={brands}
  variant="fades"
  gap={32}
  iconWidth={5}
  speed={2}
/>
```

---


## 📦 Build and publish

```bash
npm run build
npm publish
```

---


## 🤝 Contributions

Pull requests and suggestions are welcome at
👉 [https://github.com/T0N1-Dev/react-tech-slider](https://github.com/T0N1-Dev/react-tech-slider)

[![GitHub](https://img.shields.io/badge/GitHub-Repo-black?logo=github)](https://github.com/T0N1-Dev/react-tech-slider)
[![npm](https://img.shields.io/npm/v/react-tech-slider)](https://www.npmjs.com/package/react-tech-slider?activeTab=readme)