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>

Demo

License

MIT © thinktodo-dev