@ryvora/react-scrollable-list
TypeScript icon, indicating that this package has built-in type declarations

4.0.0Β β€’Β PublicΒ β€’Β Published

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! 🌊✨

Package Sidebar

Install

npm i @ryvora/react-scrollable-list

Weekly Downloads

55

Version

4.0.0

License

MIT

Unpacked Size

55.5 kB

Total Files

9

Last publish

Collaborators

  • xjectro