React-Framify

Introduction

React-Framify is a powerful library that allows you to showcase your app screenshots within realistic device frames. Whether you're presenting mobile or tablet designs, React-Framify makes it easy. Check out the official React-Framify GitHub repository for more details.

Supported React.js

React-Framify supports React.js 18.2.0 and above.

Supported Device Framesets

React-Framify supports the following devices:

• iPhone 14 Pro/15/15 Pro: These devices feature dynamic island displays.
• iPad Pro: Showcase your tablet designs with precision.
• Google Pixel 8/9/9 Pro: Android users, we've got you covered too!

Installation

To install React-Framify, simply run:

npm install react-framify

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

You can import the following components from React-Framify:

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

Props

IPhoneFrame, AndroidFrame, and IPadFrame

These components accept the following props:

• screenshotList: An array of screenshot URLs (required).
• statusBar: Specify the status bar mode (light or dark) (required).
• deviceColor: Customize the device frame color (optional).
• orientation: Set to "portrait" or "landscape" (optional) - Default: "portrait".
• buttonStyles: Customize button styles (optional).

buttonStyles

• backgroundColor: string (optional) - Default: '#004F98'
• color: string (optional) - Default: '#FFF'
• border: string (optional) - Default: 'none'
• borderRadius: string (optional) - Default: '16px'
• fontSize: string (optional) - Default: '16px'
• fontFamily: string (optional) - Default: 'Verdana, Geneva, Tahoma, sans-serif'
• fontWeight: string (optional) - Default: '700'
• padding: string (optional) - Default: '8px 16px'

Here's an example using AndroidFrame:

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

Using with Next.js

If you're incorporating React-Framify into a Next.js project, you'll need to handle images a bit differently due to Next.js's image optimization features. Here's how you can do it:

"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() {
  // Use the .src attribute of imported images for the screenshotList
  const screenshotList = [
    FrameSetSSOne.src,
    FrameSetSSTwo.src,
    FrameSetSSThree.src,
    FrameSetSSFour.src
  ];

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

Feel free to explore additional customization options for buttonStyles.

Implementing Screenshots

Showcasing screenshots in a normal React.js project versus a Next.js project is straightforward. If you're using Next.js, handle images as StaticImageData for optimal performance.

Preview

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

License and Optional Support

React-Framify is open-source and available under the GNU General Public License v3.0.For information on how to contribute, please see our Contributing Guidelines. If you find our library useful, consider supporting Hatem Soliman via PayPal.

Join the Journey

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!

---

Feel free to adapt and expand upon this documentation as needed. Happy framing! 📱🚀

---

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!

Product Preview

Here are a few sneak peeks at what you can do with React-Framify: