Thinktodo-polaroid NPM

thinktodo-polaroid

A polaroid component from ThinkToDo

Install

npm install --save thinktodo-polaroid

Usage

import React from 'react'
import PolaroidCard from 'thinktodo-polaroid'
import 'bootstrap/dist/css/bootstrap.min.css'

const App = () => {
  return (
    <PolaroidCard
      containerClass='bg-white p-2 overflow-hidden'
      rotate={'8'}
      zoom={'1.1'}
      width='200px'
      height='fit-content'
      imgSrc='https://ik.imagekit.io/gsozk5bngn/12_uHbxld-PZ.jpg'
      imgWidth='100%'
      imgHeight={null}
      imgClass='img-thumbnail border-0'
      onClick={() => {}}
      body={<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</q>}
    />
  )
}

export default App

Component Props

Props	Default	Type	Description	Example
containerClass	`''`	string	Class for card element	bg-white
rotate	`''`	string	Rotation of card	8
zoom	`''`	string	Zoom aspect when hover on card	1.2
width	`''`	string	Width of card	200px
height	`''`	string	Height of card	fit-content
imgClass	`''`	string	Class for image element
imageContainerClass	`''`	string	Class for image container	img-thumbnail
imgSrc	`''`	string	Image url	https://ik.imagekit.io/gsozk5bngn/12_uHbxld-PZ.jpg
imgWidth	`'100%'`	string	Width of image	120px
imgHeight	`null`	string	Height of image	120px
onClick	`()=>{}`	function	Event triggers when click on card	`()=>{ console.log("item selected") }`
body	`<div></div>`	node	Body component of card body	`<p>Lorem ipsum dolor sit ametelit.</p>`