@mycujoo/mcls-components-grid

Grid

The Grid component is a customizable grid component that displays a collection of items/cards in a grid format. It provides options for sorting, loading more items, and handling user interactions.

This is intended to be used inside an mcls list data provider like: Events Context or Packages Context.

Please check this CodeSandbox example.

import { Grid } from '@mycujoo/mcls-components-grid'
import { MatchCard } from '@mycujoo/mcls-components-card'

const config = {
  title: {
    // Customize the title text styles
  },
  seeAll: {
    // Customize the "See All" text styles
  },
  layout: {
    marginTop: '10px', // Set the top margin of the grid layout
    marginBottom: '20px', // Set the bottom margin of the grid layout
    gutter: 10, // Set the spacing between grid items
    gridAlign: 'left', // Set the alignment of grid items ('left', 'center', 'right')
  },
  stretchCardsToFitContainerWidth: true, // Stretch the cards to fit the container width
  hideWhenEmpty: false, // Hide the grid when there are no items
  preloadCard: {
    bgColor: '#ebebeb', // Set the background color of the preload card
  },
  sort: {
    by: 'title', // Sort the items by 'title', 'start_time', or 'popularity'
    direction: 'asc', // Set the sort direction ('asc' or 'desc')
  },
  cardsHover: {
    // Configure the hover effect for the grid cards
  },
  loadMoreType: 'infinite', // Set the type of load more functionality ('infinite', 'button', or 'none')
};


<Grid
  data={events}
  title="Upcoming events"
  lang="de"
  onSeeAll={() => { console.log("On see all click") }}
  onLoadMore={() => { console.log("Load more events") }}
  config={config}
  isLoading={isLoading}
  limitReached={limitReached}
  className="my-custom-grid"
  preloadCard={<PreloadCard />} 
  noDataContent={<NoContent />}
  card={
    <MatchCard
      dataPaths={dataPathsObj}
      onClick={handleCardClick}
      config={{
        size: 'm',
        borderRadius: 8,
        thumbnail: {
          icon: true,
          viewers: true,
        },
        primaryColor: '#f12d4b',
        showTag: true,
      }}
    />
  }
/>