react-mockup

Create simple mockups with a single react component

About

react-mockup lets you create simple mockups with a single react component. This package contains three different components:

• <WindowMockup/>
• <BrowserMockup/>
• <MobileMockup/>

react-mockup also provides a web editor that is still currently under development that allows you to customize your mockup visually without needing to fiddle around with the props. (The editor will generate the nessacary react-mockup component for you). Visit Editor

Install

You can install react-mockup using NPM:

npm install --save react-mockup

Example Usage

import React from 'react'
import {BrowserMockup} from 'react-mockup'
import 'react-mockup/dist/index.css'

function App {
  const frameStyle={
    backdropFilter: 'blur(16px)',
    background:'radial-gradient(86.36% 107.55% at 6.49% 12.32%,rgba(255, 255, 255, 0.5) 0%,rgba(255, 255, 255, 0.5) 100%)',
    border:'1px solid rgba(228, 228, 228, 0.3)',
    padding:'20px',
    borderRadius:'20px',
  }

  return(
    <>
      <h1>React Mockup!</h1>
      <BrowserMockup
        src=""
        type="chrome"
        windowControlPosition="right"
        angleX="5deg"
        angleY="10deg"
        accentColor="orange"
        urlValue="google.com"
        shadow="none"
        border="none"
        color="black"
        frameStyle={frameStyle}
      />
    </>
  )
}

Component Specific Properties

💻 Window & 🖱️ Browser Mockup

Properties	What to insert
src	The image of what you want to display in the mockup
type	Button aesthetics (Currently accepts 4 types 'default', 'mac', 'chrome' and 'outline')
angleX	X angle of the mockup
angleY	Y angle of the mockup
shadow	Mockups box-shadow property. (Set as 'none' if you do not want to set anything)
border	Mockups border property. (Set as 'none' if you do not want to set anything)
color	The mockups head color
accentColor	The color of the buttons

💻 Window Mockup

Properties	What to insert
windowName	The display name of the window mockup
windowControlPosition	'right' or 'left'

🖱️ Browser Mockup

Properties	What to insert
frameStyle	Freely insert your original styles a div that wraps the mockup component
urlValue	The displayed URL value stored in the browser mockup
windowControlPosition	'right' or 'left'

📱 Mobile Mockup [Beta]

Properties	What to insert
src	The image of what you want to display in the mockup
size	The size of the phone mockup (default is '1')
angleX	X angle of the mockup
angleY	Y angle of the mockup
shadow	Mockups box-shadow property. (Set as 'none' if you do not want to set anything)
border	Mockups border property. (Set as 'none' if you do not want to set anything)

License

MIT ©