📛 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

npm install react-tech-slider

pnpm add react-tech-slider

🌐 Live Demo

👉 View Demo

✅ Default usage (running)

Import the stylesheet once in your app entry:

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:

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

🌫️ Fades variant

<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

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

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

Fades

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

📦 Build and publish

npm run build
npm publish

🤝 Contributions

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