Xer - Horizontal Drag-to-Scroll Component

A lightweight, accessible horizontal drag-to-scroll component for React.

Features

• 🎯 Simple Integration: Just wrap your items and it works
• ♿ Accessible: Built-in accessibility features
• 📱 Touch Friendly: Optimized for touch devices
• ⚡ Lightweight: Minimal bundle size
• 🎭 Smooth Animations: Inertia scrolling and smooth interactions
• 🎨 Customizable: Flexible styling options
• 🔄 Auto-Structure: Automatically creates proper ul/li structure
• 🌐 SSR Compatible: Works with Next.js, Gatsby, and other SSR frameworks
• ⚛️ React 19 Compatible: Updated for React 19 and modern React patterns

Installation

npm install xer-horizontal-scroll

Usage

import Xer from 'xer-horizontal-scroll';
import 'xer-horizontal-scroll/css';

function MyComponent() {
  return (
    <Xer>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      {/* Add more items */}
    </Xer>
  );
}

Next.js (App Router)

// app/page.tsx
import Xer from 'xer-horizontal-scroll';
import 'xer-horizontal-scroll/css';

export default function Page() {
  return (
    <div>
      <h1>My App</h1>
      <Xer>
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </Xer>
    </div>
  );
}

SSR Compatibility

Xer is fully SSR compatible and works with:

• ✅ Next.js (App Router & Pages Router)
• ✅ Gatsby
• ✅ Remix
• ✅ Nuxt.js
• ✅ Vite SSR
• ✅ Any React SSR framework

The component automatically:

• Renders the correct HTML structure during SSR
• Hydrates interactivity on the client
• Handles browser APIs safely
• Maintains accessibility during SSR

How It Works

The component automatically:

• Creates the proper ul/li structure
• Handles drag-to-scroll interactions
• Provides smooth inertia scrolling
• Works on both desktop and mobile
• Hides scrollbars for a clean look
• Includes full accessibility support
• Renders safely during SSR

API

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | React.ReactNode | - | Content to render | | className | string | '' | Additional CSS classes | | ariaLabel | string | 'Horizontal list frame' | ARIA label | | ariaDescription | string | - | ARIA description | | role | string | 'region' | ARIA role | | center | boolean | true | Center content | | direction | 'ltr' \| 'rtl' | 'ltr' | Text direction | | gap | string | '1rem' | Gap between items | | padding | string | '1rem' | Container padding |

Examples

Basic Usage

// Just wrap your items!
<Xer>
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</Xer>

Custom Styling

<Xer className="custom-scroll" gap="2rem" padding="2rem">
  <div>Item 1</div>
  <div>Item 2</div>
</Xer>

RTL Support

<Xer direction="rtl">
  <div>Item 1</div>
  <div>Item 2</div>
</Xer>

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• React 18+ and React 19

License

MIT © II-II-II