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

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;

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:

iPhone Layout:

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 ☕