polaroid-image
Version:
Turn any image into a polaroid!
149 lines (136 loc) • 2.8 kB
Markdown
# polaroid-image
Convert any image into a polaroid!
# Install
```bash
npm install polaroid-image
```
# Usage
```js
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:
```js
<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:
```css
.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.
```js
<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:
```css
.targetImage {
border: 5px solid black;
}
/*this will add a border of 5px around the IMAGE only*/
```