A polaroid component from ThinkToDo
npm install --save thinktodo-polaroid
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
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> |
MIT © thinktodo-dev