instantphotoframe

Instant film front-end component made easy.

Usage no npm install needed!

<script type="module">
  import instantphotoframe from 'https://cdn.skypack.dev/instantphotoframe';
</script>

README

Image of Example

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