polaroid-image

polaroid-image

Convert any image into a polaroid!

Install

$ npm install polaroid-image

Usage

let Polaroid = require('polaroid-image');

This package has several optional props

If imgSrc prop (must be of type string) is not specified, then a default image will appear.

ex:

<Polaroid imgSrc='yourimageurlhere' />

Optional props:

text (must be of type string) - adds text to polaroid

ex.

text='your_text_here'

rotate (must be of type string) - rotate polaroid

ex.

rotate='-15' - rotates polaroid left by 15 degrees

rotate='30' - rotates polaroid right by 30 degrees

zoom (typeof string or boolean)

ex.

zoom='scale(1.5)'

zoom='false' - won't scale on hover

imageShadow (typeof string or boolean)

ex.

imageShadow='0 0 10px blue'

imageShadow='false' - removes image shadow

frameShadow (typeof string or boolean)

ex.

frameShadow='5px 2px 5px red'

frameShadow='false' - removes frame shadow

hoverFrameShadow (typeof string or boolean)

ex.

hoverFrameShadow='0 0 30px black'

hoverFrameShadow='false' - removes frame shadow on hover

frameMargin (must be of type string)

ex.

frameMargin='1em 2em' - 1em margin for top/bottom and 2em right/left

frameWidth (must be of type string)

ex.

frameWidth='50px' - changes frame width to 50px

imageMargin (must be of type string)

ex.

imageMargin='10px' - margin of image is 10px for top/right/bottom/left

imageWidth (must be of type string)

ex.

imageWidth='25px' -image width is now 25px

imageHeight (must be of type string)

ex.

imageHeight='100px' - imageHeight is now 100px

frameHeight (must be of type string)

ex.

frameHeight='200px' - frame height is now 200px

imgClass (must be of type string) - adds a class to image to make it easy to style in css.

ex.

imgClass='yourClassName'

in css file:

.yourClassName {
    padding: 2em
}
/*Image top/right/bottom/left will now have a padding of 2em*/

NOTE

Trying to change a style through css will NOT WORK if it exists as a prop. To style that specific element just change through props

ex.

<Polaroid
  imgSrc='imageUrlHere' //url of an image
  frameColor='black' //sets the frame color to black
  imageMargin='3em' //sets image top-right-bottom-left margins to 3em
  imgClass='targetImage' // adds a class to the image
/>

Since the 'border' element is not part of any of the components props, targeting through css WILL work.

ex.

Inside the css file:

.targetImage {
    border: 5px solid black;
}
/*this will add a border of 5px around the IMAGE only*/