React-Framify

Installation

npm install react-framify

To install React-Framify, simply run the command above. Version 2.0.0 is the major release after our beta launch, and we encourage you to stick with it. If you have an older version installed, make sure to update to the latest.

Usage

Importing Components

import { IPhoneFrame, AndroidFrame, IPadFrame } from "react-framify";

Import the device frame components you need for your project.

Example Usage

<AndroidFrame
  screenshotList={screenshotList}
  deviceColor="#A6A6A6"
  orientation="portrait"
  statusBar={{ mode: "light" }}
  buttonStyles={{
    backgroundColor: "#1DCDFE",
  }}
/>

This example demonstrates how to use the AndroidFrame component with various customization options.

Using with Next.js

"use client"

// Import your images as StaticImageData
import FrameSetSSOne from "../../../public/img-1.png";
import FrameSetSSTwo from "../../../public/img-2.png";
import FrameSetSSThree from "../../../public/img-3.png";
import FrameSetSSFour from "../../../public/img-4.png";

export default function MyApp() {
  const screenshotList = [
    FrameSetSSOne.src,
    FrameSetSSTwo.src,
    FrameSetSSThree.src,
    FrameSetSSFour.src
  ];

  return (
    <AndroidFrame
      screenshotList={screenshotList}
      deviceColor="#A6A6A6"
      orientation="portrait"
      statusBar={{ mode: "light" }}
      buttonStyles={{
        backgroundColor: "#1DCDFE",
      }}
    />
  )
}

In a Next.js project, handle images as StaticImageData for optimal performance.

Preview

Check out the YouTube showcase for a visual preview of React-Framify in action.

Join us on this exciting journey to make React-Framify the go-to library for all your app presentation needs. Your feedback and contributions are what make this project thrive. Let's create something amazing together!

Launch on Product Hunt 🚀

We're excited to announce that React-Framify is now live on Product Hunt! If you love our library and want to support us, please check out our Product Hunt page. Your upvotes and feedback are greatly appreciated!

FAQ

1. 1. What is React-Framify?

   React-Framify is a device frameset library for React that allows you to showcase your mobile or tablet app screenshots within realistic device frames.

2. 2. What device frames are supported?

   React-Framify currently supports iPhone 14/15 Pro, iPad Pro, and Google Pixel 8/9/9 Pro. More devices will be added in future updates.

3. 3. How do I contribute to React-Framify?

   We welcome contributions! If you’d like to contribute, please check out our GitHub repository for more details on how to get started.

4. 4. Where can I report issues?

   You can report issues on our GitHub Issues page.

License and Optional Support

React-Framify is open-source and available under the GNU General Public License v3.0. If you find our library useful, consider supporting Hatem Soliman via PayPal.