Card Scroller

a light-weight React full screen Card Scroller Component.

Installation

npm i card-scroller

Usage

import CardScroller from '../src/index'
import Img from './test.png'

const CardList = [{...},{...},{...}] //{...} is CardObject

const MyCard = () => {
    <CardScroller CardList={CardList}/>
}

API

| param | detail | type | require* | | --------------------- | --------------------------------------| -------------------- | -------- | | CardList | card object list (only static card) | CardObject[ ] | true |

CardList - Example

const CardList = [{...},{...},{...}]

const MyCard = () => {
    <CardScroller CardList={CardList}/>
}

CardObject

| param | detail | type | require* | | --------------------- | ---------------------------------------------- | -------- | -------- | | img | card image which always display | object | true | | category | card category of the detail | string | true | | summary | summary of the card | string | true | | dateAndAuthor | the detail of this card's creation | string | true | | onClick | onClick Event handler | function | false | | activeBackgroundColor | active background color when mouse over it | string | true |

CardObject - Example

{
    img:Img,
    category:"ANDROID",
    summary:"Bringing more people online and introducing Camera Go",
    dateAndAuthor:"By Arpit Midha & Joris van Mens - Mar 19,2020",
    onClick:function(){
        console.log("Do something")
    },
    activeBackgroundColor:"#00e5ff"
}