@jeremyling/react-material-ui-horizontal-scroll-li

React Material UI Horizontal Scroll List

A customizable horizontal scroll list using React Material UI components. This component provides the horizontal scroll functionality while allowing you to define your own content within the scroll list.

Installation

npm install --save @jeremyling/react-material-ui-horizontal-scroll-list

The following packages are peer dependencies that must be install for this package to work.

  @material-ui/core
  @material-ui/icons
  lodash
  react-router-dom

Usage Examples

Example with the default component of an image background with a translucent text area.

import React from "react";
import HorizontalScrollList from "@jeremyling/react-material-ui-horizontal-scroll-list";

const categories = [
  {
    name: 'Fresh Produce',
    image: {
      url: "https://via.placeholder.com/360",
    },
    slug: 'fresh-produce',
  },
  {
    name: 'Meat & Seafood',
    image: {
      url: "https://via.placeholder.com/360",
    },
    slug: 'meat-seafood',
  },
  {
    name: 'Dairy, Chilled & Eggs',
    image: {
      url: "https://via.placeholder.com/360",
    },
    slug: 'dairy-chilled-eggs',
  },
  {
    name: 'Beverages',
    image: {
      url: "https://via.placeholder.com/360",
    },
    slug: 'beverages',
  },
  {
    name: 'Snacks',
    image: {
      url: "https://via.placeholder.com/360",
    },
    slug: 'snacks',
  },
];

export default function BasicDemo(props) {
  return (
    <HorizontalScrollList
      items={categories}
      rows={2}
      imageUrlAttribute="image.url"
      imageAltAttribute="name"
      titleAttribute="name"
      handleTileClick={(item) =>
        history.push("/categories/" + item.slug)
      }
    />
  );
}
/>

Example with a custom component as list content

import React, { useMemo } from "react";
import ProductCard from "./ProductCard";
import HorizontalScrollList from "@jeremyling/react-material-ui-horizontal-scroll-list";

const cardHeight = {
  xs: 168,
  sm: 205,
  md: 265,
};

export default function HorizontalProductList(props) {
  const { products } = props;
  const { widthType } = useDimensions();

  const cardWidth = useMemo(() => {
    switch (widthType) {
      case "xs":
        return 90;
      case "sm":
        return 120;
      default:
        return 180;
    }
  }, [widthType]);

  return (
    <HorizontalScrollList
      items={products}
      rows={1}
      tileWidth={cardWidth + 16}
      tileHeight={cardHeight}
      heightAllowance={0}
      component={(item) => <ProductCard product={item} cardWidth={cardWidth} />} // custom built component
      style={{ justifyContent: "flex-start" }}
    />
  );
}

Props

Prop	Type	Default	Description
items	`array`	required	Content data
rows	`number`	`1`	Number of rows in list
imageUrlAttribute^	`string`	`undefined`	Attribute used to determine img src for default component
imageAltAttribute^	`string`	`undefined`	Attribute used to determine img alt for default component
titleAttribute^	`string`	`undefined`	Attribute used to determine text for default component
handleTileClick^	`func`	`(item) => {}`	Method to handle individual tile click event
tileLink^	`func`	`undefined`	Link to route to using React Router. By default, item is passed as the only argument
tileWidth	`object` or `number`	`{ xs: 90, sm: 120, md: 180 }`	Width of individual tile. Can be a number or an object with values for breakpoints
tileHeight	`object` or `number`	`{ xs: 90, sm: 120, md: 180 }`	Height of individual tile. Can be a number or an object with values for breakpoints
heightAllowance	`number`	`10`	Height allowance to adjust container height for scrollbar, margin, etc.
component	`func`	`undefined`	Custom component for list content
showIndicators	`bool`	`true`	Whether to show scroll indicators
style	`object`	`undefined`	Style to apply to root container