Responsive-Preview

A component for toggling between web, tablet, and mobile views.

Introduction

Responsive Preview is a React-based component that allows developers to easily switch between desktop, tablet, and mobile views for previewing web applications. It provides features to help developers instantly test UI designs across different device environments.

Key Features

• View Toggle Function: Switch between desktop, tablet, and mobile views with a button click.
• Custom Width Settings: Developers can customize the screen sizes for mobile and tablet views.

Installation

You can install the package using the following command:

1npm install responsive-preview-sb

or

1yarn add responsive-preview-sb

Usage

Here’s an example of how to use the ResponsivePreview component to switch between desktop, tablet, and mobile views.

Example 1

1<ResponsivePreview defaultView="desktop" mobileWidth={375} tabletWidth={768}>
2  <iframe
3    src="https://flowbite.com/"
4    width="100%"
5    height="600px"
6    title="Blog Website Preview"
7    frameBorder="0"
8  />
9</ResponsivePreview>

Desktop View

Tablet View

Mobile View

---

Example 2

1<ResponsivePreview defaultView="mobile" mobileWidth={375} tabletWidth={768}>
2  <h2 className="responsive-title">Responsive UI Test</h2>
3  <p className="responsive-description">
4    Resize the screen to see how the layout adapts to different devices. ...
5  </p>
6
7  <div className="responsive-box-container">
8    <div className="responsive-box">Box 1</div>
9    <div className="responsive-box">Box 2</div>
10    <div className="responsive-box">Box 3</div>
11  </div>
12
13  <button className="responsive-button">Try It Out</button>
14</ResponsivePreview>

Desktop View

Tablet View

Mobile View

---

Props

Prop Name	Type	Default	Description
children	ReactNode	null	The content to be previewed inside the component
defaultView	string	desktop	The initial view (desktop, tablet, or mobile)
mobileWidth	number	375	Width of the mobile view (in px)
tabletWidth	number	768	Width of the tablet view (in px)
className	string	""	Additional class name for custom styling

Style Guide

The component provides default styles that can be customized as needed.

1.responsive-preview {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  width: 100%;
6  padding: 20px;
7  background-color: #f5f5f5;
8  border-radius: 8px;
9}
10
11.responsive-preview-controls {
12  display: flex;
13  gap: 12px;
14  margin-bottom: 20px;
15  background-color: white;
16  padding: 8px;
17  border-radius: 8px;
18  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
19}
20
21.control-btn {
22  display: flex;
23  align-items: center;
24  gap: 8px;
25  padding: 8px 16px;
26  border: 1px solid #e2e8f0;
27  border-radius: 6px;
28  background-color: white;
29  cursor: pointer;
30  transition: all 0.2s ease;
31  font-size: 14px;
32  color: #64748b;
33}
34
35.control-btn.active {
36  background-color: #3b82f6;
37  color: white;
38  border-color: #2563eb;
39  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
40}

Development & Contribution

Project Setup

1git clone https://github.com/leeseobin00/Responsive-Preview.git
2cd responsive-preview

License

MIT License