react-app-preview-component

    0.0.66 • Public • Published

    react-app-preview-component

    npm i react-app-preview-component

    React component to display app previews beautifully with Desktop and Mobile screenshots. Each screenshot can be framed by a specific device. Below is a list of devices with the best widths and heights of screenshots for each device.

    Recommended Sizes for Screenshots

    Device Width Height Aspect Ratio
    iPhone X 242 524 0.46
    iPhone 8 238 423 0.56
    iPad 418 559 0.75
    Macbook Pro 625 390 1.6
    iMac 737 415 1.78
    Google Pixel 2 255 452 .56

    See the ./storybook for implementation examples

    Default Implementation

    import { IPhoneX } from 'react-app-preview-component'
    import IPhoneXScreenshot from './screenshots/iphone_x_screenshot.png'
     
    <IPhoneX>
      <img src={IPhoneXScreenshot} alt="iPhone X Screenshot" />
    </IPhoneX>

    With a Carousel

    Props
    Name Type Default Description
    carousel boolean false Toggle if images can change.
    changeOnClick boolean false Only change screenshot slide on click. By default
    carousel will slide automatically on interval.
    interval float 2000 Duration between slide change.
    import { IPhoneX } from 'react-app-preview-component'
    import IPhoneXScreenshot1 from './screenshots/iphone_x_screenshot1.png'
    import IPhoneXScreenshot2 from './screenshots/iphone_x_screenshot2.png'
    import IPhoneXScreenshot3 from './screenshots/iphone_x_screenshot3.png'
     
    <IPhoneX carousel interval={3000}>
      <img src={IPhoneXScreenshot} alt="iPhone X Screenshot1" />
      <img src={IPhoneXScreenshot2} alt="iPhone X Screenshot2" />
      <img src={IPhoneXScreenshot3} alt="iPhone X Screenshot3" />
    </IPhoneX>

    Please help me make this library better by submitting issues or pull requests

    Device assets courtesy of Facebook Design

    Keywords

    none

    Install

    npm i react-app-preview-component

    DownloadsWeekly Downloads

    21

    Version

    0.0.66

    License

    none

    Unpacked Size

    1.32 MB

    Total Files

    31

    Last publish

    Collaborators

    • danielhollcraft