instantphotoframe v1.0.13

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

• Starting with polaroid film.
  • Polaroid frame
  • Ability to add image
  • Polaroid film styling.
• Install React and React-Dom.
• Install Storybook for viewing component while developing.
• Bundle using webpack.
• First npm deployment.
• Polaroid Back-side