Subscribe
Sign in
React Framify
p/react-framifyFrame your app in style with Framify’s sleek device sets!
Start new thread
Hatem Soliman

React Framify - Frame your app in style with Framify’s sleek device sets

by
React-Framify is a lightweight & versatile React component library that provides device frames for showcasing in-app screenshots. Whether you're looking to spice up your app presentations or give your project visuals that extra edge, Framify has you covered!

Add a comment

Replies

Best
Hatem Soliman
Maker
📌
Back in 2023, while working on a freelance gig, I was asked to showcase app screenshots inside a virtual iPhone. I thought, "Surely, there’s an npm package for that!" But after searching, I found only outdated and unsupported options. So, I built my own. Initially, it was just for that project. But when the client was thrilled with the unique carousel I had created, I realized I might be onto something bigger. That’s when the idea for React-Framify was born. Creating this package wasn’t easy. I faced numerous challenges and even gave up multiple times. But something kept pulling me back, and by Q2 2024, after countless hours of coding and learning, I finally launched React-Framify. Today, I’m proud to say it has over 5000+ downloads and counting. What started as a necessity for one project has now become a tool that anyone can use to add that extra flair to their app presentations. I hope you find it as useful as I did!
Declan Xavier Holbrook
Hey Hatem! React-Framify looks awesome. Love how you turned a small freelance gig into something so useful. The screenshots in the carousel really make the apps pop! Super excited to see where you take it next. Congrats on the launch and all the best!
Hatem Soliman
Maker
@declanxavierholbrook Hey Declan, Thanks so much for the kind words! 🙌 I’m glad you’re excited about React-Framify—I’m sure you’ll enjoy using it. I’ll be updating the Product Hunt screenshots soon with an even better look and adding more documentation here for anyone who needs a quick reference without diving into NPM or GitHub. Thanks again, and I look forward to hearing more of your feedback!
Hatem Soliman
Maker
@declanxavierholbrook Hey Declan, Thanks for your patience. React-Framify has been successfully made an Open-Source and fully-featured NPM package available. If you have any questions, please refer to the official documentation. The documentation is quite extensive. https://github.com/CodeNKoffee/r...
Ezra Quentin Wolfe
@hatem_soliman hey, this is exactly what I've been searching for! Looks super handy for presentations. Just wondering, though--how easy is it to customize the carousel? Do I need to know React in-depth to tweak things? I can code a bit, but not super advanced. Thanks!
Hatem Soliman
Maker
@ezraquentinwolfe Hey Ezra, React-Framify is super user-friendly—if you're familiar with React props (or HTML attributes), you're all set! The library offers 3 frame types: 1. iOS (iPhone 14/15/Pro) 2. Android (Pixel 9/9 Pro) 3. iPad Pro Customization is key: 1. Choose any device frame color using a HEX code. 2. Fully customize the carousel navigation buttons—from border and border radius to background and text color, font family, and font size. I’ll be updating the documentation on NPM and GitHub soon, with a clearer overview on how to use it. If you're curious, here’s a preview of the old customization version: https://youtu.be/8VcSHI2qlkQ?si=...
Hatem Soliman
Maker
@ezraquentinwolfe Hey Ezra, Thanks for your patience. React-Framify has been successfully made an Open-Source and fully-featured NPM package available. If you have any questions, please refer to the official documentation. The documentation is quite extensive. https://github.com/CodeNKoffee/r...
Hatem Soliman
Maker
Hello everyone! 👋 It's Hatem, the developer behind React-Framify, and I'm thrilled to share that React-Framify has officially reached version 2.0.0! We're committed to continuous improvement and making your experience even better. For detailed information, please visit our https://github.com/CodeNKoffee/r.... It covers everything you need to know about using React-Framify. As for the YouTube video and an extensive preview, stay tuned! We're actively updating our directories to align with our latest launch. Exciting times ahead! 🚀📱 Feel free to explore the new features and enhancements in React-Framify 2.0.0. Let's create something amazing together! 🎉