react-status-stories/dist/App.js

A lightweight and customizable React component to display WhatsApp-style status stories with circular previews. Perfect for building Instagram, WhatsApp, or Snapchat-like story UIs in your React apps.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import ReactStatus from './Stories/Stories';
import img1 from './assests/Rectangle1.png';
import img2 from './assests/Rectangle2.png';
import img3 from './assests/Rectangle3.png';
import img4 from './assests/Rectangle4.png';
import img5 from './assests/Rectangle5.png';
import './Stories/Stories.css';
var demoStories = [
    {
        imageUrl: img1,
        imageCaption: 'First Story',
    },
    {
        imageUrl: img2,
        imageCaption: 'Second Story',
    },
    {
        imageUrl: img3,
        imageCaption: 'Third Story',
    },
    {
        imageUrl: img4,
        imageCaption: 'Fourth Story',
    },
    {
        imageUrl: img5,
        imageCaption: 'Fifth Story',
    },
];
var App = function () {
    return (_jsxs("div", { style: { maxWidth: 450, margin: '40px auto' }, children: [_jsx("h2", { children: "React Stories Component Demo" }), _jsx(ReactStatus, { items: demoStories, timeout: 2500, customClass: "demo-stories" }), _jsx("h3", { children: "Usage Example" }), _jsx("pre", { style: { background: '#f4f4f4', padding: 16, borderRadius: 8 }, children: "\nimport { ReactStatus } from \"react-status-stories\";\nimport \"react-status-stories/dist/Stories.css\";\nconst stories = [\n  { imageUrl: 'url1', \n  imageCaption: 'Caption 1' },\n  { imageUrl: 'url2', \n  imageCaption: 'Caption 2' },\n  // ...\n];\n\n<ReactStatus items={stories} timeout={2500} \ncustomClass=\"my-stories\" />\n        " })] }));
};
export default App;