├── .editorconfig ├── .gitignore ├── .travis.yml ├── README.md ├── example ├── README.md ├── package.json ├── public │ ├── index.html │ └── manifest.json ├── src │ ├── App.js │ ├── index.css │ └── index.js └── yarn.lock ├── package.json ├── postcss.config.js ├── rollup.config.js ├── src ├── index.tsx ├── styles.css ├── test.ts └── typings.d.ts ├── tsconfig.json ├── tsconfig.test.json ├── webpack.config └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-browser-frame 2 | 3 | Zhoozh up your content with this responsive browser frame mockup. 4 | 5 | Typescript-friendly. 6 | 7 | ## Install 8 | 9 | ```bash 10 | npm install react-browser-frame 11 | 12 | or 13 | 14 | yarn add react-browser-frame 15 | ``` 16 | 17 | ## Usage 18 | 19 | Stick whatever you like inside a `` and it will render as children props. The BrowserFrame component will be 100% as wide as its parent, and as high as the content you pass in to it. 20 | 21 | ## Examples 22 | 23 | ### An image 24 | 25 | ![Image example](https://res.cloudinary.com/diouve9dy/image/upload/v1585474968/image_zkt042.png) 26 | 27 | ```jsx 28 | import React from "react"; 29 | import BrowserFrame from "react-browser-frame"; 30 | 31 | import myImg from "./img/doge.jpg"; 32 | 33 | export default () => ( 34 | 35 | A handsome doggo

36 | 37 | ); 38 | ``` 39 | 40 | ### Text content 41 | 42 | ![Text content example](https://res.cloudinary.com/diouve9dy/image/upload/v1585474966/text_zojzpv.png) 43 | 44 | ```jsx 45 | export default () => ( 46 | 47 |

It was the best of times, it was the blurst of times...

48 | 49 | ); 50 | ``` 51 | 52 | ### An iframe 53 | 54 | ![Iframe example](https://res.cloudinary.com/diouve9dy/image/upload/v1585474967/iframe_qcknzd.png) 55 | 56 | ```jsx 57 | const iframeSrc = 58 | "https://codepen.io/liamj/embed/preview/VdqgZK?height=500&theme-id=39032&default-tab=result"; 59 | 60 | export default () => ( 61 | 62 |