@adactive/arc-itemcarousel

Item Carousel component

Live examples here

Getting started

    npm i --save-dev @adactive/arc-itemcarousel

OR

    yarn add --dev @adactive/arc-itemcarousel

    import AdsumItemCarousel from "@adactive/arc-itemcarousel";
    ...
    
    onItemClicked(item) {
        console.log("[ITEM CLICKED] :: ", item);
    }
    
    const itemsWithoutLogo = [
        {
            name: 'Food'
        },
        ...
        {
            name: 'Carpark'
        }
    ];
    
    <AdsumItemCarousel
        isOpen={true}
        items={itemsWithoutLogo}
        itemsPerPage={9}
        onItemClicked={this.onItemClicked}
    />

Props

export type LogoObject = {
    +uri: string
};

export type ItemObject = {
    +name: string,
    +logo?: LogoObject
};

type PropTypes = {|
    +isOpen: boolean,
    +items: Array<ItemObject>,
    +itemsPerPage: number,
    +onItemClicked: () => null,
    +listWrapperCSS?: CSSStyleDeclaration,
    +thumbNailWrapperCSS?: CSSStyleDeclaration,
    +logoWrapperCSS?: CSSStyleDeclaration,
    +logoCSS?: CSSStyleDeclaration,
    +titleWrapperCSS?: CSSStyleDeclaration,
    +titleCSS?: CSSStyleDeclaration,
    +dashCSS?: CSSStyleDeclaration,
    +carouselOptions?: Object,
    +defaultLogo?: string
|};

static defaultProps = {
    isOpen: false,
    items: [],
    itemsPerPage: 0,
    onItemClicked: null
};

isOpen -> To show or hide itemCarousel

items -> Array of itemsObjects to be displayed in the carousel

itemsPerPage -> To set the number of thumbnail in each carousel page

onItemClicked -> A callback function to capture clicking of thumbnail

listWrapperCSS -> To customise CSS for the overall list

thumbNailWrapperCSS -> To customise CSS for the overall thumbnail css

logoWrapperCSS -> To customise CSS for the div wrapping around the logo

logoCSS -> To customise CSS for logo div

titleWrapperCSS -> To customise CSS for the wrapper around title and dash div

titleCSS -> To customise CSS for the title div

dashCSS -> To customise CSS for the dash div

carouselOptions -> Refer to nuka-carousel for more information

defaultLogo -> To add a default logo for items in the carousel without logo

Copy component inside your project src folder

Less only

`npx @adactive/arc-itemcarousel copy --less-only`

Full copy

`npx @adactive/arc-itemcarousel copy`