Add Instagram like stories in React
Today, we’ll show you how to add Instagram like stories in React. Here, we will create an example where we will design a React component similar to Instagram Stories. It will render images, content and video.
Demo Application
Add Instagram like stories in React
1. Project structure
- react-insta-stories-example
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- utils.js
- package-lock.json
- package.json
- README.md
2. Package dependencies
Run the following command to install react-insta-stories npm package.
1 | npm i react-insta-stories |
You will find the version of the following packages in React application.
react
^18.2.0
react-insta-stories
^2.4.2
3. Implementation
Refer to the following files for implementation.
utils.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import { WithSeeMore } from 'react-insta-stories'; const image = { display: 'block', maxWidth: '100%', borderRadius: 4, } const contentStyle = { background: '#333', width: '100%', padding: 20, color: 'white', height: '100%' } const bgStyle = { maxWidth: '100%', height: '100%', padding: 40, background: '#ccd8e4' } const customSeeMore = { textAlign: 'center', fontSize: 14, bottom: 20, position: 'relative' } const CustomStory = ({ action, isPaused }) => { return <div style={{ ...contentStyle, background: 'Aquamarine', color: '#333' }}> <h1>Why do we use Lorem Ipsum?</h1> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p> <h1>{isPaused ? 'Paused' : 'Playing'}</h1> <p>Thank you!</p> </div> } export const storyList = [ { content: ({ action, isPaused }) => { return <div style={contentStyle}> <h1>What is Lorem Ipsum?</h1> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p> <img style={image} src="https://images.unsplash.com/photo-1565506737357-af89222625ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80"></img> <h3>Perfect. But there's more! →</h3> </div> } }, { content: ({ action, story }) => { return <WithSeeMore story={story} action={action}><div style={{ background: 'snow', padding: 20, height: '100%' }}> <h1 style={{ marginTop: '70%', marginBottom: 0 }}>ðŸŒ</h1> <h1 style={{ marginTop: 5 }}>We have our good old image and video stories, just the same.</h1> </div></WithSeeMore> }, seeMoreCollapsed: ({ toggleMore, action }) => <p style={customSeeMore} onClick={() => toggleMore(true)}>A custom See More message →</p>, seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div>, duration: 5000 }, { url: 'https://picsum.photos/1080/1920', seeMore: ({ close }) => <div style={bgStyle}><h2>Just checking the see more feature.</h2><p style={{ textDecoration: 'underline' }} onClick={close}>Go on, close this popup.</p></div> }, { url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4', type: 'video' }, { content: CustomStory } ] |
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import React from 'react'; import Stories from 'react-insta-stories'; import { storyList } from './utils'; function App() { return ( <div className="App"> <h4>Add Instagram like stories in React - <a href="https://www.cluemediator.com">Clue Mediator</a></h4> <div className='pl-3'> <Stories loop keyboardNavigation defaultInterval={8000} stories={storyList} width={300} height={500} onStoryEnd={(s, st) => console.log('story ended', s, st)} onAllStoriesEnd={(s, st) => console.log('all stories ended', s, st)} onStoryStart={(s, st) => console.log('story started', s, st)} storyContainerStyles={{ borderRadius: 8, overflow: 'hidden' }} /> </div> </div> ); } export default App; |
index.css
1 2 3 4 5 6 7 8 9 10 11 12 | body { margin: 20px; font-family: Arial, Helvetica, sans-serif; } p { line-height: 25px; } .pl-3 { padding-left: 30px; } |
index.js
1 2 3 4 5 6 7 8 9 10 | import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <App /> ); |
4. Output
Run your application and check the output in the browser.
Live Demo
That’s it for today.
Thank you for reading. Happy Coding..!!
