react-timed-image
Version:
React image component that re-renders at timed intervals. Includes optional cache busting.
36 lines (35 loc) • 2.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Hello = void 0;
const react_1 = __importDefault(require("react"));
const TimedImage_1 = require("../components/TimedImage");
// === Setup ===
const StoryComponent = TimedImage_1.TimedImage; // <-- Set to your component
const meta = {
title: 'Stories/TimedImage', // <-- Set to your story title
component: StoryComponent,
parameters: {
options: { showPanel: false }, // Don't show addons panel
},
};
exports.default = meta;
// === Stories ===
exports.Hello = {
name: 'Cached and Uncached',
render: () => {
const src = 'https://loremflickr.com/220/140';
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("p", null, "Reloads every 3 seconds -- uncached, will change:"),
react_1.default.createElement(TimedImage_1.TimedImage, { src: src, interval: 3000 }),
react_1.default.createElement("pre", null, `<TimedImage src="https://loremflickr.com/220/140" interval={3000} />`),
react_1.default.createElement("p", null, "When uncached (default), a cache busting query param is attached to the src attribute. In most circumstances, this causes the browser to retrieve the image again."),
react_1.default.createElement("hr", null),
react_1.default.createElement("p", null, "Reloads every 5 seconds (default time) -- cached, will not change:"),
react_1.default.createElement(TimedImage_1.TimedImage, { src: src, uncached: false }),
react_1.default.createElement("pre", null, `<TimedImage src="https://loremflickr.com/220/140" uncached={false} />`),
react_1.default.createElement("p", null, "Disabling the cache buster typically prevents the browser from retrieving the image again.")));
},
};