DEV Community

Cover image for Display Your Website or Application in a Realistic Device Layout Using the device-layouts NPM Package
Jackson Kasi
Jackson Kasi Subscriber

Posted on

Display Your Website or Application in a Realistic Device Layout Using the device-layouts NPM Package

Hello Devs 😊

Device-Layouts NPM

Introduction:

The device-layouts npm package is a useful tool for web developers who want to showcase their website or application in a realistic device layout. It provides MacBook and iPhone device frames in SVG format that can be easily integrated into a web page. In addition to its default features, the package also allows you to customize the CSS styles of the device layouts. In this article, we will explore how to customize the CSS styles of the device-layouts package.

Installation:

The first step in using the device-layouts package is to install it in your project. You can do this by running the following command in your terminal:

npm install device-layouts
Enter fullscreen mode Exit fullscreen mode

Once the installation is complete, you can start using the package in your project.

Usage:

To use the device-layouts package, you need to import it into your project and pass an element to be displayed in the device layout. Here's an example:

import React from "react";
import Layouts from "device-layouts";

const App = () => {
  const element = (
    <div>
      <iframe
        src="https://www.example.com"
        width="100%"
        height="800"
      ></iframe>
    </div>
  );
  const { Laptop, Iphone } = Layouts({ element });
  return (
    <>
      <Laptop />
      <Iphone />
    </>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

CSS Styles: The device-layouts package also allows you to customize the CSS styles of the device layouts. You can add new styles or override the pre-defined ones. The pre-defined CSS styles are located in ./src/assets/css/style.css and include the following classes:

  • laptop_layout

  • iphone_layout

  • laptop_layout_child

  • iphone_layout_child

Laptop Layout:

Image description

Image description

iPhone Layout:

Image description

Image description

Conclusion:

In this article, we have explored how to use the device-layouts npm package to display your website or application in a realistic device layout.

The device-layouts package is a useful tool for web developers who want to showcase their projects in a realistic and visually appealing way.

Happy Coding ☕

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️