@pagedotapp/page-scroll-list/meta.json

PageScrollList - A reusable React component

{
	"name": "PageScrollList",
	"description": "A horizontal scrolling list component similar to YouTube's implementation with smooth navigation and customizable layout",
	"category": "Navigation",
	"tags": ["carousel", "scroll", "list", "horizontal", "navigation", "slider"],
	"features": [
		"Horizontal scrolling with smooth navigation",
		"Accepts custom components as children",
		"Optional title display above the list",
		"Customizable column width or auto-sizing",
		"Configurable gap between items",
		"Navigation arrows with auto-hide",
		"Dot indicators option",
		"Auto-play functionality",
		"Keyboard accessible",
		"Responsive design",
		"YouTube-style scrolling behavior"
	],
	"dependencies": ["@pagedotapp/page-carousel", "@pagedotapp/page-text"],
	"props": {
		"children": {
			"type": "React.ReactNode",
			"required": true,
			"description": "Components to display in the scrolling list"
		},
		"title": {
			"type": "string",
			"required": false,
			"description": "Optional title to display above the list"
		},
		"columnWidth": {
			"type": "number",
			"required": false,
			"description": "Fixed width for each item in pixels (auto if not set)"
		},
		"gap": {
			"type": "number",
			"required": false,
			"default": 16,
			"description": "Gap between items in pixels"
		},
		"showArrows": {
			"type": "boolean",
			"required": false,
			"default": true,
			"description": "Show navigation arrows"
		},
		"showDots": {
			"type": "boolean",
			"required": false,
			"default": false,
			"description": "Show dot indicators"
		},
		"autoPlay": {
			"type": "boolean",
			"required": false,
			"default": false,
			"description": "Enable auto-play functionality"
		},
		"className": {
			"type": "string",
			"required": false,
			"description": "Additional CSS class name"
		}
	},
	"examples": [
		{
			"title": "Basic Usage",
			"code": "<PageScrollList>\n  <Card1 />\n  <Card2 />\n  <Card3 />\n</PageScrollList>"
		},
		{
			"title": "With Title and Fixed Width",
			"code": "<PageScrollList title=\"Popular Items\" columnWidth={320}>\n  {items.map(item => <ItemCard key={item.id} {...item} />)}\n</PageScrollList>"
		},
		{
			"title": "Auto-play Carousel",
			"code": "<PageScrollList\n  title=\"Featured Products\"\n  autoPlay={true}\n  autoPlayInterval={3000}\n>\n  {products.map(product => <ProductCard key={product.id} {...product} />)}\n</PageScrollList>"
		}
	],
	"version": "1.0.0-alpha.3"
}