Ahoy, Content Navigator! β΅
The scrollable-list
module is your trusty first mate for creating horizontally scrolling lists with snazzy previous/next buttons!
It's like a conveyor belt for your UI elements, making sure users can see everything without overwhelming them! π’
βοΈ Horizontal Scrolling: Smoothly scrolls content left and right.- π Navigation Buttons: Provides
PreviousButton
andNextButton
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!
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! πβ¨