{"id":13683536,"url":"https://github.com/mohitk05/react-insta-stories","last_synced_at":"2025-05-13T19:05:13.410Z","repository":{"id":34048100,"uuid":"167136952","full_name":"mohitk05/react-insta-stories","owner":"mohitk05","description":"A React component for Instagram like stories","archived":false,"fork":false,"pushed_at":"2025-01-27T18:48:17.000Z","size":4165,"stargazers_count":1415,"open_issues_count":141,"forks_count":250,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-23T10:49:32.212Z","etag":null,"topics":["instagram","react","react-components","stories","typescript"],"latest_commit_sha":null,"homepage":"https://mohitk05.github.io/react-insta-stories/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohitk05.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-23T07:22:04.000Z","updated_at":"2025-04-22T00:11:23.000Z","dependencies_parsed_at":"2024-02-04T20:27:30.083Z","dependency_job_id":"f40714a9-6ae6-4932-a89f-19a9b30af895","html_url":"https://github.com/mohitk05/react-insta-stories","commit_stats":{"total_commits":216,"total_committers":22,"mean_commits":9.818181818181818,"dds":"0.36111111111111116","last_synced_commit":"2baeed2ed826f965029f4490aa43d076b7c9ca5c"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitk05%2Freact-insta-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitk05%2Freact-insta-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitk05%2Freact-insta-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohitk05%2Freact-insta-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohitk05","download_url":"https://codeload.github.com/mohitk05/react-insta-stories/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250535030,"owners_count":21446506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["instagram","react","react-components","stories","typescript"],"created_at":"2024-08-02T13:02:14.817Z","updated_at":"2025-04-27T04:24:58.685Z","avatar_url":"https://github.com/mohitk05.png","language":"TypeScript","funding_links":["https://ko-fi.com/L3L2Q0BK"],"categories":["Uncategorized","TypeScript"],"sub_categories":["Uncategorized"],"readme":"![Main image](https://i.imgur.com/OAL12S5.jpg)\n\n\u003ch1 style=\"margin: 0\" align=\"center\"\u003ereact-insta-stories\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA React component for Instagram like stories\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://mohitk05.github.io/react-insta-stories/\"\u003eHomepage\u003c/a\u003e • \u003ca href=\"https://discord.gg/CBUC5c3\"\u003eDiscord\u003c/a\u003e\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\u003ca href=\"https://www.npmjs.com/package/react-insta-stories\"\u003e\u003cimg alt=\"NPM\" src=\"https://img.shields.io/npm/v/react-insta-stories.svg\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://standardjs.com\"\u003e\u003cimg alt=\"JavaScript Style Guide\" src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"#backers\"\u003e\u003cimg alt=\"Backers on Open Collective\" src=\"https://opencollective.com/react-insta-stories/backers/badge.svg\"\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"#sponsors\"\u003e\u003cimg alt=\"Sponsors on Open Collective\" src=\"https://opencollective.com/react-insta-stories/sponsors/badge.svg\"\u003e\u003c/a\u003e\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cimg height=\"600\" src=\"https://i.imgur.com/Y1s8FKb.png\" alt=\"Demo screenshot\"/\u003e\n\n## Install\n\n```bash\nnpm install --save react-insta-stories\n```\n\n## Demo\n\nThe component responds to actions like tap on right side for next story, on left for previous and tap and hold for pause. Custom time duration for each story can be provided.\nSee it in action here: https://mohitk05.github.io/react-insta-stories/\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react';\n\nimport Stories from 'react-insta-stories';\n\nconst App = () =\u003e {\n\treturn (\n\t\t\u003cStories\n\t\t\tstories={stories}\n\t\t\tdefaultInterval={1500}\n\t\t\twidth={432}\n\t\t\theight={768}\n\t\t/\u003e\n\t);\n};\n```\n\nHere `stories` is an array of story objects, which can be of various types as described [below](#story-object).\n\n## Props\n\n| Property               | Type            | Default                   | Description                                                                                                                                                         |\n| ---------------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `stories`              | [String/Object] | `required`                | An array of image urls or array of story objects (options described below)                                                                                          |\n| `renderers` ⚡️        | [Object]        | `[]`                      | An array of renderer objects (options described below)                                                                                                              |\n| `defaultInterval`      | Number          | 1200                      | Milliseconds duration for which a story persists                                                                                                                    |\n| `loader`               | Component       | Ripple loader             | A loader component as a fallback until image loads from url                                                                                                         |\n| `header`               | Component       | Default header as in demo | A header component which sits at the top of each story. It receives the `header` object from the `story` object. Data for header to be sent with each story object. |\n| `storyContainerStyles` | Object          | `{}`                      | Styles object for the outer container                                                                                                                               |\n| `width`                | Number/String   | 360                       | Width of the component, e.g. 600 or '100vw' or 'inherit'                                                                                                            |\n| `height`               | Number/String   | 640                       | Height of the component, e.g. 1000 or '100%' or 'inherit'                                                                                                           |\n| `storyStyles`          | Object          | none                      | Override the default story styles mentioned below.                                                                                                                  |\n| `progressContainerStyles` | Object          | `{}`                      | Styles object for the container wrapping the progress bars                                                                                                                 |\n| `progressWrapperStyles` | Object          | `{}`                      | Styles object for the container wrapping each progress bar bars                                                                                                                 |\n| `progressStyles`       | Object          | `{}`                      | Styles object for the progress bars                                                                                                                 |\n| `loop`                 | Boolean         | false                     | The last story loop to the first one and restart the stories.                                                                                                       |\n| **New props**          | ⭐️             | ⭐️                       | ⭐️                                                                                                                                                                 |\n| `isPaused`             | Boolean         | false                     | Toggle story playing state                                                                                                                                          |\n| `currentIndex`         | Number          | undefined                 | Set the current story index                                                                                                                                         |\n| `onStoryStart`         | Function        | -                         | Callback when a story starts                                                                                                                                        |\n| `onStoryEnd`           | Function        | -                         | Callback when a story ends                                                                                                                                          |\n| `onAllStoriesEnd`      | Function        | -                         | Callback when all stories in the array have ended                                                                                                                   |\n| `onNext`               | Function        | -                         | Callback when the user taps/press to proceed to the next story                                                                                                                   |\n| `onPrevious`           | Function        | -                         | Callback when the user taps/press to go back to the previous story                                                                                                                    |\n| `keyboardNavigation`   | Boolean         | false                     | Attaches arrow key listeners to navigate between stories if true. Also adds up arrow key listener for opening See More and Escape/down arrow for closing it         |\n| `preventDefault`       | Boolean         | false                     | Disable the default behavior when user click the component                                                                                                          |\n| `preloadCount`         | number          | 1                         | Determines how many stories should be preloaded ahead of the current story index.                                                                                   |\n\n### Story object\n\nInstead of simple string url, a comprehensive 'story object' can also be passed in the `stories` array.\n\n| Property           | Description                                                                                                                                   |\n|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|\n| `url`              | The url of the resource, be it image or video.                                                                                                |\n| `type`             | Optional. Type of the story. `type: 'video'                                                                                                   | 'image'`. Type `video` is necessary for a video story. |\n| `duration`         | Optional. Duration for which a story should persist.                                                                                          |\n| `header`           | Optional. Adds a header on the top. Object with `heading`, `subheading` and `profileImage` properties.                                        |\n| `seeMore`          | Optional. Adds a see more icon at the bottom of the story. On clicking, opens up this component. (v2: updated to Function instead of element) |\n| `seeMoreCollapsed` | Optional. Send custom component to be rendered instead of the default 'See More' text.                                                        |  |\n| `styles`           | Optional. Override the default story styles mentioned below.                                                                                  |\n| `preloadResource`  | Optional. Whether to preload the resource or not, defaults to `true` for images and `false` for videos (video preloading is experimental)         | \n\n### Default story styles\n\nFollowing are the default story content styles. Override them by providing your own style object with each story or a global override by using the `storyStyles` prop.\n\n```js\nstoryContent: {\n    width: 'auto',\n    maxWidth: '100%',\n    maxHeight: '100%',\n    margin: 'auto'\n}\n```\n\n### Renderers\n\nTo allow reusable components to display story UI, you can pass in pre-built or custom-built components in a special manner to leverage this behavior. Each renderer object has two properties:\n\n-   `renderer` - This is the UI component that will be rendered whenever the object matches certain conditions.\n-   `tester` - This is a function that tests whether the renderer is suitable for the current story. It receives the current story object to render and returns an object with two properties:\n    -   `condition` - This states if the renderer matches the current story's criteria (a boolean).\n    -   `priority` - A number denoting the priority of the current renderer. E.g. priority of 2 is less than a 5, and if two renderers have condition = `true`, their priorities will be compared and the one with higher priority will be selected.\n\nSo essentially a simple renderer would look like this:\n(you may also refer the inbuilt [Image renderer](src/renderers/Image.tsx))\n\n```jsx\n// Renderer.js\n\nexport const renderer = ({ story, action, isPaused, config }) =\u003e {\n\treturn \u003cdiv\u003eHello!\u003c/div\u003e;\n};\n\nexport const tester = (story) =\u003e {\n\treturn {\n\t\t// Use this renderer only when the story type is video\n\t\tcondition: story.type === 'video',\n\t\tpriority: 3,\n\t};\n};\n```\n\nEvery `renderer` component gets 4 props as shown above. Out of these the `story`, `action` and `isPaused` are as their names suggest. The `config` object contains certain global properties which were passed while initialising the component. It looks like this:\n\n```js\nconst { width, height, loader, storyStyles } = config;\n```\n\n\u003e These props can be used to customize the entire UI as required, and then can be packaged as a Node module and shared. If someone else wishes to use your package as a renderer, they can simply pass it inside an array as the `renderers` prop to the main component.\n\u003e _If you publish any such renderer, please raise a PR to add it to this list. A few suggestions would be a Markdown renderer, highlighted code renderer, etc._\n\nList of public renderers:\n\n-   Add one here\n\n### Higher Order Components\n\n#### `WithSeeMore`\n\nThis is a wrapper component which includes the UI and logic for displaying a 'See More' link at the bottom of the story. This is available as a named export from the package and can be used to easily add the functionality to a custom content story.\nIt takes in two props - `story` and `action`.\n\n```jsx\nconst { WithSeeMore } from 'react-insta-stories';\n\nconst CustomStoryContent = ({ story, action }) =\u003e {\n\treturn \u003cWithSeeMore story={story} action={action}\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eHello!\u003c/h1\u003e\n\t\t\t\u003cp\u003eThis story would have a 'See More' link at the bottom ✨\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/WithSeeMore\u003e\n}\n```\n\nYou can also send custom 'See More' component for the collapsed state. While using `WithSeeMore`, pass in a `customCollapsed` prop with a value of your custom component. It will receive a `toggleMore` and `action` prop to handle clicks on the See More link.\n\n```jsx\nconst { WithSeeMore } from 'react-insta-stories';\n\nconst customCollapsedComponent = ({ toggleMore, action }) =\u003e\n\t\u003ch2 onClick={() =\u003e {\n\t\taction('pause');\n\t\twindow.open('https://mywebsite.url', '_blank');\n\t}}\u003e\n\t\tGo to Website\n\t\u003c/h2\u003e\n\nconst CustomStoryContent = ({ story, action }) =\u003e {\n\treturn \u003cWithSeeMore\n\t\tstory={story}\n\t\taction={action}\n\t\tcustomCollapsed={customCollapsedComponent}\n\t\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eHello!\u003c/h1\u003e\n\t\t\t\u003cp\u003eThis story would have a 'See More' link at the bottom and will open a URL in a new tab.\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/WithSeeMore\u003e\n}\n```\n\nIf not implementing a custom UI, you can send the `customCollapsedComponent` component inside the story object as `seeMoreCollapsed`.\n\n```jsx\nconst stories = [\n\t{\n\t\turl: 'some.url',\n\t\tseeMore: SeeMoreComponent, // when expanded\n\t\tseeMoreCollapsed: customCollapsedComponent, // when collapsed\n\t},\n];\n```\n\n#### `WithHeader`\n\nThis named export can be used to include the header UI on any custom story. Simply wrap the component with this HOC and pass in some props.\n\n```jsx\nconst { WithHeader } from 'react-insta-stories';\n\nconst CustomStoryContent = ({ story, config }) =\u003e {\n\treturn \u003cWithHeader story={story} globalHeader={config.header}\u003e\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eHello!\u003c/h1\u003e\n\t\t\t\u003cp\u003eThis story would have the configured header!\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/WithHeader\u003e\n}\n```\n\nYou may also use both these HOCs together, as in the [Image renderer](src/renderers/Image.tsx).\n\n## Common Usage\n\n#### 1. Basic implementation with string URLs\n\nIf you wish to have a bare minimum setup and only need to show image stories, you can simply pass the image urls inside the `stories` array.\nThis will show all your images as stories.\n\n```js\nimport Stories from 'react-insta-stories';\n\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t'data:image/jpg;base64,R0lGODl....',\n\t'https://mohitkarekar.com/icon.png',\n];\n\nreturn () =\u003e \u003cStories stories={stories} /\u003e;\n```\n\n#### 2. Customising stories\n\nIf plain images does not suffice your usecase, you can pass an object instead of a string. This object supports all the properties mentioned above in the section [story object](#story-object). While using the object type, use `url` to denote the source url in case of media.\n\nThese properties can be mixed in different ways to obtain desired output.\n\n##### Duration\n\nEach story can be set to have a different duration.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\turl: 'https://example.com/pic2.jpg',\n\t\tduration: 5000,\n\t},\n];\n```\n\n##### Header\n\nAdds a header to the story.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\turl: 'https://example.com/pic2.jpg',\n\t\tduration: 5000,\n\t\theader: {\n\t\t\theading: 'Mohit Karekar',\n\t\t\tsubheading: 'Posted 30m ago',\n\t\t\tprofileImage: 'https://picsum.photos/100/100',\n\t\t},\n\t},\n];\n```\n\n##### See More\n\nAdds a click to see more option at the bottom of the story. When present, shows the arrow at the bottom and when clicked, shows the provided component.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\turl: 'https://example.com/pic2.jpg',\n\t\tduration: 5000,\n\t\tseeMore: SeeMore, // some component\n\t},\n\t{\n\t\turl: 'https://example.com/pic3.jpg',\n\t\tduration: 2000,\n\t\tseeMore: ({ close }) =\u003e {\n\t\t\treturn \u003cdiv onClick={close}\u003eHello, click to close this.\u003c/div\u003e;\n\t\t},\n\t},\n];\n```\n\n##### Type\n\nIf provided `type: video`, then the component loads a video player. All expected features come in automatically. Duration is ignored, if provided and actual video duration is considered.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\turl: 'https://example.com/vid.mp4',\n\t\tduration: 5000, // ignored\n\t\ttype: 'video',\n\t},\n];\n```\n\n##### Styles\n\nOverride default story element styles. Regular style object can be provided.\n\n#### 3. Custom JSX as a story\n\nYou can render custom JSX inside a story by sending a `content` property inside the story object. If a `content` property is present, all other media related properties are ignored. `duration` holds true here.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\tcontent: (props) =\u003e (\n\t\t\t\u003cdiv style={{ background: 'pink', padding: 20 }}\u003e\n\t\t\t\t\u003ch1 style={{ marginTop: '100%', marginBottom: 0 }}\u003e🌝\u003c/h1\u003e\n\t\t\t\t\u003ch1 style={{ marginTop: 5 }}\u003eA custom title can go here.\u003c/h1\u003e\n\t\t\t\u003c/div\u003e\n\t\t),\n\t},\n];\n```\n\nThe content property can hold any React component. For further control, it receives two important props:\n\n-   `action` It allows you to fire play/pause actions.\n-   `isPaused` Holds true is the story is currently paused, false otherwise.\n\n```jsx\nconst stories = [\n\t'https://example.com/pic.jpg',\n\t{\n\t\tcontent: ({ action, isPaused }) =\u003e {\n\t\t\tuseEffect(() =\u003e {\n\t\t\t\tsetTimeout(() =\u003e {\n\t\t\t\t\taction('pause');\n\t\t\t\t\tsetTimeout(() =\u003e {\n\t\t\t\t\t\taction('play');\n\t\t\t\t\t}, 2000);\n\t\t\t\t}, 2000);\n\t\t\t}, []);\n\t\t\treturn (\n\t\t\t\t\u003cdiv style={{ background: 'pink', padding: 20 }}\u003e\n\t\t\t\t\t\u003ch1 style={{ marginTop: '100%', marginBottom: 0 }}\u003e🌝\u003c/h1\u003e\n\t\t\t\t\t\u003ch1\u003e{isPaused ? 'Paused' : 'Playing'}\u003c/h1\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t);\n\t\t},\n\t},\n];\n```\n\nIn the code above, on render a timeout will be set which would fire a 'pause' action after 2 seconds. Again after 2 seconds, a 'play' action would be fired.\nIn the JSX, `isPaused` is used to display the current play state.\n\n## Development\n\nTo develop this package locally, you can follo these steps:\n\n1. Clone the repo to your local.\n2. Run `npm install`.\n3. Then `cd example \u0026\u0026 npm install`\n4. Come back to the root directory `cd ..`\n5. Run `npm start`\n6. In a new command window/tab, run `npm run example`.\n\nThis will start a hot-reloading setup with a live example.\n\n\u003c!-- Testing --\u003e\n\n## Thanks To\n\n-   [@SamHambert](https://github.com/SamHerbert/SVG-Loaders) for the default spinner SVG\n\n## Websites using `react-insta-stories`\n\n-   [Corsza](http://corsza.com/)\n-   [TLDR Stories](https://www.producthunt.com/posts/tldr-stories-a0c16732-ba1e-4a40-b420-8582b9128bac)\n-   [Dysperse](https://dysperse.com)\n\nDo you use `react-insta-stories` too? Raise a PR to include your site in this list!\n\n## Contributors\n\nThis project exists thanks to all the people who contribute.\n\u003ca href=\"https://github.com/mohitk05/react-insta-stories/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/react-insta-stories/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n## Like the project? Support me on Ko-fi\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/L3L2Q0BK)\n\n## License\n\nMIT © [mohitk05](https://github.com/mohitk05)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohitk05%2Freact-insta-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohitk05%2Freact-insta-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohitk05%2Freact-insta-stories/lists"}