react-popify

react-popify

react-popify 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.

Installation

To install the package, run the following command:

npm install react-popify

or using yarn:

yarn add react-popify

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 './components/ImageQuickView'

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}
        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)
• 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}
  isVisible={!!selectedImage}
  onClose={closeQuickView}
/>

Future Components

We plan to extend react-popify with more utility-focused components that integrate seamlessly into modern React applications.

License

This project is licensed under the MIT License.