{"id":23413152,"url":"https://github.com/codenkoffee/react-framify","last_synced_at":"2025-07-14T15:08:28.046Z","repository":{"id":223038439,"uuid":"759170956","full_name":"CodeNKoffee/react-framify","owner":"CodeNKoffee","description":"React-Framify is a React library that lets you showcase app screenshots within realistic device frames, enhancing your app presentations.","archived":false,"fork":false,"pushed_at":"2024-11-16T22:44:55.000Z","size":5821,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-12T18:11:26.223Z","etag":null,"topics":["carousel","carousel-component","carousel-slider","flutter","mobile","npm","npm-package","react-native","reactjs"],"latest_commit_sha":null,"homepage":"https://react-framify.hatemsoliman.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeNKoffee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-17T20:56:48.000Z","updated_at":"2025-05-21T19:25:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"049fd017-d286-4038-b258-005a80dba43d","html_url":"https://github.com/CodeNKoffee/react-framify","commit_stats":null,"previous_names":["codenkoffee/react-framify"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/CodeNKoffee/react-framify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeNKoffee%2Freact-framify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeNKoffee%2Freact-framify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeNKoffee%2Freact-framify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeNKoffee%2Freact-framify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeNKoffee","download_url":"https://codeload.github.com/CodeNKoffee/react-framify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeNKoffee%2Freact-framify/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265311871,"owners_count":23745161,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","carousel-component","carousel-slider","flutter","mobile","npm","npm-package","react-native","reactjs"],"created_at":"2024-12-22T19:25:27.381Z","updated_at":"2025-07-14T15:08:28.017Z","avatar_url":"https://github.com/CodeNKoffee.png","language":"TypeScript","funding_links":["https://paypal.me/h4temsoliman?country.x=EG\u0026locale.x=en_US"],"categories":[],"sub_categories":[],"readme":"# React-Framify\n\n[![GitHub Badge](https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://github.com/CodeNKoffee)\n[![LinkedIn Badge](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://linkedin.com/in/h4temsoliman)\n[![Twitter Badge](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge\u0026logo=twitter\u0026logoColor=white)](https://twitter.com/h4temsoliman)\n[![Website Badge](https://img.shields.io/badge/website-000000?style=for-the-badge\u0026logo=About.me\u0026logoColor=white)](https://hatemsoliman.dev)\n\n## Introduction\n\nReact-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](https://github.com/CodeNKoffee/react-framify) for more details.\n\n## Supported React.js\n\nReact-Framify supports React.js `18.2.0` and above.\n\n## Supported Device Framesets\n\nReact-Framify supports the following devices:\n\n- **iPhone 14 Pro/15/15 Pro**: These devices feature dynamic island displays.\n- **iPad Pro**: Showcase your tablet designs with precision.\n- **Google Pixel 8/9/9 Pro**: Android users, we've got you covered too!\n\n## Installation\n\nTo install React-Framify, simply run:\n\n```bash\nnpm install react-framify\n```\n\nVersion 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.\n\n## Usage\n\n### Importing Components\n\nYou can import the following components from React-Framify:\n\n```jsx\nimport { IPhoneFrame, AndroidFrame, IPadFrame } from \"react-framify\";\n```\n\n### Props\n\n#### `IPhoneFrame`, `AndroidFrame`, and `IPadFrame`\n\nThese components accept the following props:\n\n- `screenshotList`: An array of screenshot URLs (required).\n- `statusBar`: Specify the status bar mode (`light` or `dark`) (required).\n- `deviceColor`: Customize the device frame color (optional).\n- `orientation`: Set to `\"portrait\"` or `\"landscape\"` (optional) - Default: `\"portrait\"`.\n- `buttonStyles`: Customize button styles (optional).\n\n#### `buttonStyles`\n\n- `backgroundColor`: `string` (optional) - Default: `'#004F98'`\n- `color`: `string` (optional) - Default: `'#FFF'`\n- `border`: `string` (optional) - Default: `'none'`\n- `borderRadius`: `string` (optional) - Default: `'16px'`\n- `fontSize`: `string` (optional) - Default: `'16px'`\n- `fontFamily`: `string` (optional) - Default: `'Verdana, Geneva, Tahoma, sans-serif'`\n- `fontWeight`: `string` (optional) - Default: `'700'`\n- `padding`: `string` (optional) - Default: `'8px 16px'`\n\nHere's an example using `AndroidFrame`:\n\n```tsx\n\u003cAndroidFrame\n  screenshotList={screenshotList}\n  deviceColor=\"#A6A6A6\"\n  orientation=\"portrait\"\n  statusBar={{ mode: \"light\" }}\n  buttonStyles={{\n    backgroundColor: \"#1DCDFE\",\n  }}\n/\u003e\n```\n\n### Using with Next.js\n\nIf 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:\n\n```tsx\n\"use client\"\n\n// Import your images as StaticImageData\nimport FrameSetSSOne from \"../../../public/img-1.png\";\nimport FrameSetSSTwo from \"../../../public/img-2.png\";\nimport FrameSetSSThree from \"../../../public/img-3.png\";\nimport FrameSetSSFour from \"../../../public/img-4.png\";\n\nexport default function MyApp() {\n  // Use the .src attribute of imported images for the screenshotList\n  const screenshotList = [\n    FrameSetSSOne.src,\n    FrameSetSSTwo.src,\n    FrameSetSSThree.src,\n    FrameSetSSFour.src\n  ];\n\n  return (\n    \u003c\u003e\n      \u003cAndroidFrame\n        screenshotList={screenshotList}\n        deviceColor=\"#A6A6A6\"\n        orientation=\"portrait\"\n        statusBar={{ mode: \"light\" }}\n        buttonStyles={{\n          backgroundColor: \"#1DCDFE\",\n        }}\n      /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nFeel free to explore additional customization options for `buttonStyles`.\n\n### Implementing Screenshots\n\nShowcasing 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.\n\n## Preview\n\nCheck out the [YouTube showcase](https://youtu.be/_KoRix1OtKc?si=x34T8xTuyOIlbuFQ) for a visual preview of React-Framify in action.\n\n![Preview 1](/assets/how-to-img1.png)\n![Preview 2](/assets/how-to-img2.png)\n\n## License and Optional Support\n\nReact-Framify is open-source and available under the [GNU General Public License v3.0](/LICENSE).For information on how to contribute, please see our [Contributing Guidelines](/CONTRIBUTING.md). If you find our library useful, consider supporting [Hatem Soliman](https://hatemsoliman.dev) via [PayPal](https://paypal.me/h4temsoliman?country.x=EG\u0026locale.x=en_US).\n\n## Join the Journey\n\nJoin 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!\n\n---\n\nFeel free to adapt and expand upon this documentation as needed. Happy framing! 📱🚀\n\n---\n\n## Launch on Product Hunt 🚀\n\nWe'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!\n\n[![Product Hunt Badge](https://img.shields.io/badge/Product%20Hunt-Follow%20Us%20On%20PH-orange?style=for-the-badge\u0026logo=product-hunt\u0026logoColor=white)](https://www.producthunt.com/posts/react-framify)\n\n### Product Preview\n\nHere are a few sneak peeks at what you can do with React-Framify:\n\n![Preview 1](/assets/product-hunt-img1.png)\n![Preview 2](/assets/product-hunt-img2.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodenkoffee%2Freact-framify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodenkoffee%2Freact-framify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodenkoffee%2Freact-framify/lists"}