You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

card-scroller

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

card-scroller

[![npm](https://img.shields.io/npm/v/card-scroller?logo=npm&style=for-the-badge)](https://www.npmjs.com/package/card-scroller) [![GitHub stars](https://img.shields.io/github/stars/kevinlinpr/card-scroller?color=ff4569&logo=github&style=for-the-badge)](h

1.0.4
latest
npmnpm
Version published
Weekly downloads
3
Maintainers
1
Weekly downloads
 
Created
Source

Card Scroller

npm GitHub stars

Twitter Follow

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

paramdetailtyperequire*
CardListcard object list (only static card)CardObject[ ]true

CardList - Example

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

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

CardObject

paramdetailtyperequire*
imgcard image which always displayobjecttrue
categorycard category of the detailstringtrue
summarysummary of the cardstringtrue
dateAndAuthorthe detail of this card's creationstringtrue
onClickonClick Event handlerfunctionfalse
activeBackgroundColoractive background color when mouse over itstringtrue

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"
}

Keywords

react

FAQs

Package last updated on 04 Apr 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts