npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-insta-stories-wh

v1.0.3

Published

A React component for Instagram like stories

Downloads

21

Readme

Main image

What's new in v2? 🚀

  • Render your own components/JSX in stories
  • Create multiple instances to recreate stories by multiple users easily, jump to stories using props
  • Prop based control, event callbacks
  • Custom JSX gives control to pause/play story
  • (for devs) TypeScript 🎉
  • (for devs) Updated for easier feature additions, hooks

Install

npm install --save react-insta-stories

Demo

The 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. See it in action here: https://mohitk05.github.io/react-insta-stories/

Usage

import React, { Component } from 'react';

import Stories from 'react-insta-stories';

const App = () => {
	return (
		<Stories
			stories={stories}
			defaultInterval={1500}
			width={432}
			height={768}
		/>
	);
};

Here stories is an array of story objects, which can be of various types as described below.

Props

| Property | Type | Default | Description | | ----------------- | --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | stories | [String/Object] | required | An array of image urls or array of story objects (options described below) | | defaultInterval | Number | 1200 | Milliseconds duration for which a story persists | | loader | Component | Ripple loader | A loader component as a fallback until image loads from url | | 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. | | width | Number | 360 | Width of the component in pixels | | height | Number | 640 | Height of the component in pixels | | storyStyles | Object | none | Override the default story styles mentioned below. | | loop | Boolean | false | The last story loop to the first one and restart the stories. | | New props | ⭐️ | ⭐️ | ⭐️ | | isPaused | Boolean | false | Toggle story playing state | | currentIndex | Number | undefined | Set the current story index | | onStoryStart | Function | - | Callback when a story starts | | onStoryEnd | Function | - | Callback when a story ends | | onAllStoriesEnd | Function | - | Callback when all stories in the array have ended |

Story object

Instead of simple string url, a comprehensive 'story object' can also be passed in the stories array.

| Property | Description | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | url | The url of the resource, be it image or video. | | duration | Optional. Duration for which a story should persist. | | header | Optional. Adds a header on the top. Object with heading, subheading and profileImage properties. | | 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) | | type | Optional. To distinguish a video story. type: 'video' is necessary for a video story. | | styles | Optional. Override the default story styles mentioned below. |

Default story styles

Following 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.

storyContent: {
    width: 'auto',
    maxWidth: '100%',
    maxHeight: '100%',
    margin: 'auto'
}

Common Usage

1. Basic implementation with string URLs

If 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. This will show all your images as stories.

import Stories from 'react-insta-stories';

const stories = [
	'https://example.com/pic.jpg',
	'data:image/jpg;base64,R0lGODl....',
	'https://mohitkarekar.com/icon.png',
];

return () => <Stories stories={stories} />;

2. Customising stories

If 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. While using the object type, use url to denote the source url in case of media.

These properties can be mixed in different ways to obtain desired output.

Duration

Each story can be set to have a different duration.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
	},
];
Header

Adds a header to the story.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
		header: {
			heading: 'Mohit Karekar',
			subheading: 'Posted 30m ago',
			profileImage: 'https://picsum.photos/100/100',
		},
	},
];
See More

Adds 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.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/pic2.jpg',
		duration: 5000,
		seeMore: SeeMore, // some component
	},
	{
		url: 'https://example.com/pic3.jpg',
		duration: 2000,
		seeMore: ({ close }) => {
			return <div onClick={close}>Hello, click to close this.</div>;
		},
	},
];
Type

If 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.

const stories = [
	'https://example.com/pic.jpg',
	{
		url: 'https://example.com/vid.mp4',
		duration: 5000, // ignored
		type: 'video',
	},
];
Styles

Override default story element styles. Regular style object can be provided.

3. Custom JSX as a story

You 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.

const stories = [
	'https://example.com/pic.jpg',
	{
		content: (props) => (
			<div style={{ background: 'pink', padding: 20 }}>
				<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
				<h1 style={{ marginTop: 5 }}>A custom title can go here.</h1>
			</div>
		),
	},
];

The content property can hold any React component. For further control, it receives two important props:

  • action It allows you to fire play/pause actions.
  • isPaused Holds true is the story is currently paused, false otherwise.
const stories = [
	'https://example.com/pic.jpg',
	{
		content: ({ action, isPaused }) => {
			useEffect(() => {
				setTimeout(() => {
					action('pause');
					setTimeout(() => {
						action('play');
					}, 2000);
				}, 2000);
			}, []);
			return (
				<div style={{ background: 'pink', padding: 20 }}>
					<h1 style={{ marginTop: '100%', marginBottom: 0 }}>🌝</h1>
					<h1>{isPaused ? 'Paused' : 'Playing'}</h1>
				</div>
			);
		},
	},
];

In 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. In the JSX, isPaused is used to display the current play state.

Development

To develop this package locally, you can follo these steps:

  1. Clone the repo to your local.
  2. Run npm install.
  3. Then cd example && npm install
  4. Come back to the root directory cd ..
  5. Run npm start
  6. In a new command window/tab, run npm run example.

This will start a hot-reloading setup with a live example.

Websites using react-insta-stories

Do you use react-insta-stories too? Raise a PR to include your site in this list!

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! 🙏 Become a backer

Sponsors

Support this project by becoming a sponsor. Become a sponsor

License

MIT © mohitk05