popup-react

popup-react

popup-react is a lightweight collection of React components designed to enhance user experience. Currently, it features the ImageQuickView component, with more components planned for future releases.

Live Preview

https://popup-react.aburifat.com/

Installation

To install the package, run the following command:

npm install popup-react

or using yarn:

yarn add popup-react

Available Components

1. ImageQuickView

ImageQuickView allows users to quickly view a larger version of an image in a modal popup. It enhances the browsing experience for image-heavy applications such as e-commerce websites or galleries.

Usage

import { useState } from 'react'
import sea from './assets/sea.jpg'
import { ImageQuickView } from 'popup-react'

function App() {
  const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);

  const closeQuickView = () => {
    setSelectedImage(undefined);
  }

  return (
    <div>
      <img
        src={sea}
        onClick={() => setSelectedImage(sea)}
      />
      <ImageQuickView
        src={selectedImage}
        alt={"image alt"}
        bgWrapper={true}
        wrapperStyle={{
          color: '#fff',
          opacity: 0.7
        }}
        isVisible={!!selectedImage}
        onClose={closeQuickView}
      />
    </div>
  )
}

export default App

Props

• src: (string) Required. The URL of the image to be displayed in the quick view.
• alt: (string) Optional. The alt text for the image.
• bgWrapper: (boolean) Optional. Show or hide background wrapper. (default: true)
• wrapperStyle: (object) Optional. Contains the color and opacily property of the background Wrapper.
• isVisible: (boolean) Optional. Show or hide the quick view. (default: false)
• onClose: (function) Required. Callback function triggered when the modal is closed.

Example

const closeQuickView = () => {
    setSelectedImage(undefined);
}
<ImageQuickView
  src={selectedImage}
  alt={"image alt"}
  bgWrapper={true}
  wrapperStyle={{
    color: '#fff',
    opacity: 0.7
  }}
  isVisible={!!selectedImage}
  onClose={closeQuickView}
/>

Upcoming components

• Toast
• Action Dialog

Upcoming Improvements

• Transition animations

License

This project is licensed under the MIT License.