@mycujoo/mcls-components-grid
v1.0.0-rc.6
Published
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.
Downloads
16
Maintainers
Keywords
Readme
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,
}}
/>
}
/>