react-uncached-image

🌅 React Uncached Image

React image component that bypasses caching using query param cache busting.

   

 

Documentation

Read the official documentation.

👁️ Live Demo

Overview

An UncachedImage adds a cache-busting query param to your image src to ensure the browser requests the image from the server on every render.

Features include:

• 🐣 Fresh image every time
  • Ensure the image is fetched from the server on every render.
• 🖼️ Renders as an img
  • Use all the props an img supports, like src and alt.
• 🔤 Custom cache buster option
  • Provide your own cache buster if you'd like.

Donate

If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!

     

Table of Contents

• Documentation
• Overview
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

npm i react-uncached-image

Quick Start

import { UncachedImage } from "react-uncached-image";

Use just like you would a normal img tag in React:

<UncachedImage src="https://loremflickr.com/320/240" />

Now this image will be fetched from the server on every render.

See UncachedImage for more information and a live, interactive example.

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

⭐ Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉⭐

Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:

   

License

See LICENSE.md.