Using Instant Photo Frame
Installation
Using npm:
npm install -s instantphotoframe
In your react component:
import { Polaroid } from 'instantphotoframe'
Options
Images
You can add an image by importing it via JS or using a url. Example:
...
import Image from './images/blahblah.png'
...
<Polaroid imgurl={Image} />
...
or
...
<Polaroid imgurl="stockimage.com/thestockimage">
...
Frame Size
You can change the size of the frame!
Ranging from a scale of 1 - 10 (1 being the smallest and 10 being the biggest).
Example:
...
<Polaroid size="5" />
...
Image Size
Your image might not fit into the frame! Therefore, you can resize the image inside of the frame.
The scaling works by multiples. For example, having 2 as your input would give you 2x the size.
Example:
...
<Polaroid imgurl={Image} photoScale="1.3"/>
...
Alternatively, you can scale via X axis and Y axis also.
Example:
...
<Polaroid imgurl={Image} photoScaleX="1.3" photoScaleX="1.8"/>
...
Image Position
You can reposition the image inside the frame!
The following example would move your image 3px to the left and up.
Example:
...
<Polaroid imgurl={Image} position="3"/>
...
Alternatively you can reposition using x and y axis also.
Example:
...
<Polaroid imgurl={Image} positionTop="1.3" positionLeft="1.8"/>
...
Goals for Instant Photo Frame
- [50%] Polaroid Film
- [ ] Fuji Instax Square Film
- [ ] Fuji Instax Wide Film
- [ ] Fuji Instax Mini Film
- [75%] Documentation
Strech Goals
- [ ] Multiple frames for each film type.
- [ ] Multiple colors for each film type.
Progress
- [x] Starting with polaroid film.
- [x] Polaroid frame
- [x] Ability to add image
- [x] Polaroid film styling.
- [x] Install React and React-Dom.
- [x] Install Storybook for viewing component while developing.
- [x] Bundle using webpack.
- [x] First npm deployment.
- [ ] Polaroid Back-side