Scrollable List 📜↔️

Ahoy, Content Navigator! ⛵

The scrollable-list module is your trusty first mate for creating horizontally scrolling lists with snazzy previous/next buttons! ◀️▶️ It's perfect for image carousels, tab lists, or any collection of items that needs to fit into a constrained space while still being fully accessible.

It's like a conveyor belt for your UI elements, making sure users can see everything without overwhelming them! 🎢

What it Offers:

• ↔️ Horizontal Scrolling: Smoothly scrolls content left and right.
• 👆 Navigation Buttons: Provides PreviousButton and NextButton that automatically enable/disable based on scroll position.
• 📦 Composable Structure:
  • ScrollableList.Root: The main container.
  • ScrollableList.Viewport: The actual scrollable area.
  • ScrollableList.Item: For individual items in the list.
  • ScrollableList.PreviousButton: Button to scroll left/previous.
  • ScrollableList.NextButton: Button to scroll right/next.
• 🛠️ Customizable: Style it to your heart's content!

Example Ahoy!

import * as ScrollableList from '@ryvora/react-scrollable-list';
import React from 'react';

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'];

function MyScrollingTabs() {
  return (
    <ScrollableList.Root style={{ maxWidth: '300px', border: '1px solid #ccc' }}>
      <ScrollableList.PreviousButton>‹</ScrollableList.PreviousButton>
      <ScrollableList.Viewport style={{ padding: '10px 0' }}>
        {items.map((item) => (
          <ScrollableList.Item
            key={item}
            style={{
              display: 'inline-block',
              padding: '8px 12px',
              margin: '0 5px',
              border: '1px solid #eee',
              whiteSpace: 'nowrap',
            }}
          >
            {item}
          </ScrollableList.Item>
        ))}
      </ScrollableList.Viewport>
      <ScrollableList.NextButton>›</ScrollableList.NextButton>
    </ScrollableList.Root>
  );
}

Let your content flow freely and beautifully! 🌊✨