react-image-reveal v1.0.5

📸 React Image Reveal

ReactImageReveal is a lightweight React component that displays an image with a smooth reveal effect using CSS transitions. It preloads the image and smoothly fades it in when fully loaded.

🚀 Features

• 🔄 Smooth Reveal: Fade-in effect when the image is loaded.
• ⚙️ Customizable Transitions: Control transition duration and timing function.

🛠️ Installation

npm install react-image-reveal

⚙️ Usage

import ReactImageReveal from './ReactImageReveal';

function App() {
    return (
        <div className="image-container">
            <ReactImageReveal
                src="https://example.com/my-image.jpg"
                altText="A beautiful landscape"
                className="my-image"
                transitionDuration="2s"
                transitionTimingFunction="ease-out"
                onClick={() => alert('Image clicked!')}
            />
        </div>
    );
}

export default App;

🧩 Props

🎨 Custom Styling

The component applies a default width: 100% and height: auto. You can use the className prop to add custom styles:

.my-image {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

🛠️ Development Notes

• The component uses a useEffect hook to preload the image and handle the transition.
• It supports both functional and class-based component use cases through props.

📖 License

MIT License © 2025