react-tech-slider/README.es.md

Reusable React component slider for showcasing brands

# 📛 react-tech-slider

Un componente **slider de React** reutilizable y personalizable para mostrar logotipos de marcas o stacks tecnológicos con una animación suave.
Es compatible hacia atrás: `<Slider brandsList={...} />` conserva el comportamiento running actual, y si omitís `variant` se usa `running` por defecto.

---


## 🚀 Instalación

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

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

---


## 🌐 Demo en vivo

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

---


## ✅ Uso por defecto (running)

Importá la hoja de estilos una sola vez en el entry de tu app:

```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} />
```

También podés dejar explícito el modo running:

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

---


## 🌫️ Variante fades

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

- `variant="fades"` cambia al slider con desvanecimiento.
- `speed` es un multiplicador positivo: `2` es el doble de rápido, `0.5` es la mitad.
- Si `speed` es inválido o no positivo, cae a `1`.

---


## ✨ Props

### Props compartidas

| Prop | Tipo | Requerido | Predeterminado | Descripción |
|------|------|----------|---------------|-------------|
| `brandsList` | `Brand[]` | ✅ | — | Arreglo de marcas para renderizar |
| `variant` | `running` o `fades` | ❌ | `running` | Selecciona el modo del slider; si se omite, usa running |
| `iconWidth` | `number` | ❌ | — | Ancho global de los íconos en `rem` cuando un ítem no define su propio ancho |

### Props de running (`variant="running"`)

| Prop | Tipo | Requerido | Predeterminado | Descripción |
|------|------|----------|---------------|-------------|
| `borderColor` | `string` | ❌ | `#7c05d8` | Color del borde superior/inferior |
| `backgroundColor` | `string` | ❌ | `#00000033` | Color de fondo |
| `borderWidth` | `number` | ❌ | `1` | Grosor del borde en píxeles |
| `isPlay` | `boolean` | ❌ | `true` | Si la animación running está activa |
| `pauseOnHoverActive` | `boolean` | ❌ | `false` | Pausa la animación running al pasar el cursor |
| `durationMs` | `number` | ❌ | `30000` | Duración completa del ciclo running en milisegundos |

### Props de fades (`variant="fades"`)

| Prop | Tipo | Requerido | Predeterminado | Descripción |
|------|------|----------|---------------|-------------|
| `gap` | `number` | ❌ | — | Separación entre columnas en píxeles |
| `speed` | `number` | ❌ | `1` | Multiplicador positivo para la velocidad total de la animación fades |

### Interfaz Brand

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

- `width` y `height` están en `rem`.
- `style` y `className` se aplican al `<img>` renderizado en ambos modos.

---


## 🎨 Notas de personalización

- El modo running conserva el comportamiento CSS actual del slider.
- El modo fades rota las marcas en columnas apiladas con nombres de animación únicos por instancia.
- Ambos modos mantienen la misma forma de `Brand` y la personalización de imagen.
- `variant` es opcional; si se omite, el componente sigue en `running`.

---


## 🧪 Ejemplos

### 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}
/>
```

---


## 📦 Compilar y publicar

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

---


## 🤝 Contribuciones

Pull requests y sugerencias son bienvenidas en
👉 [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)