react-insta-stories

The Stories component includes built-in touch/click interactions:

• Tap on the right side: Move to the next story.
• Tap on the left side: Move to the previous story.
• Tap and hold: Pause the story progression.
• Custom duration: You can provide a custom time duration for individual stories within the story objects.

The component applies default styles to the story content. You can override these globally using the storyStyles prop or per-story using the styles property in a story object.

The default storyContent object is:

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

To develop the package locally with a hot-reloading setup and a live example, follow these steps:

1. Clone the repository.
2. Run npm install in the root.
3. Navigate to the example directory: cd example && npm install.
4. Return to the root: cd ...
5. Start the main process: npm start.
6. In a separate terminal, run the example: npm run example.

To start the example application, navigate to the example directory and run npm start. Alternatively, you can run the example from the project root directory using the following command:

npm run example

Install the react-insta-stories package using npm to add Instagram-like stories to your React application.

npm install --save react-insta-stories

You can render arbitrary React components as stories by providing a content property in the story object. When content is present, all other media-related properties (like url or type) are ignored. The duration property still applies.

The content function receives an object containing:

• action: A function to trigger 'play' or 'pause' actions.
• isPaused: A boolean indicating if the story is currently paused.

const stories = [
	{
		content: ({ action, isPaused }) => {
			useEffect(() => {
				setTimeout(() => {
					action('pause');
					setTimeout(() => {
						action('play');
					}, 2000);
				}, 2000);
			}, []);
			return (
				<div style={{ background: 'pink', padding: 20 }}>
					<h1>{isPaused ? 'Paused' : 'Playing'}</h1>
				</div>
			);
		},
		duration: 5000,
	},
];

To add more control, pass an array of objects instead of strings. When using objects, use the url key to specify the media source. You can customize individual stories with properties like duration, header, seeMore, type, and styles.

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',
		},
		seeMore: SeeMoreComponent, // A component to show on click
		type: 'video', // Loads a video player; duration is ignored in favor of video length
	},
];

For a minimal setup that only displays images, pass an array of image URL strings to the stories prop of the Stories component. This will render each string as an individual story.

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} />;

To use the component, import Stories from react-insta-stories and pass it a stories array. You can also configure the defaultInterval (in milliseconds), and the width and height of the stories container.

import React, { Component } from 'react';

import Stories from 'react-insta-stories';

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

The WithHeader HOC allows you to include the header UI (containing profile image, heading, etc.) on any custom story component.

const { WithHeader } = 'react-insta-stories';

const CustomStoryContent = ({ story, config }) => {
	return <WithHeader story={story} globalHeader={config.header}>
		<div>
			<h1>Hello!</h1>
			<p>This story would have the configured header!</p>
		</div>
	</WithHeader>
}