React.js Instagram Stories Builder Component Using react-insta-stories Library With Examples in JS

App.jsx

import React from 'react';
import Stories from 'react-insta-stories';
import { Container, Row, Col, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {
  const stories = [
    {
      url: 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=600',
      header: {
        heading: 'John Doe',
        subheading: 'Posted 5 minutes ago',
        profileImage: 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=600',
      },
      duration: 3000,
    },
    {
      url: 'https://images.pexels.com/photos/1181298/pexels-photo-1181298.jpeg?auto=compress&cs=tinysrgb&w=600',
      header: {
        heading: 'Jane Smith',
        subheading: 'Posted 15 minutes ago',
        profileImage: 'https://images.pexels.com/photos/1181298/pexels-photo-1181298.jpeg?auto=compress&cs=tinysrgb&w=600',
      },
      duration: 5000,
    },
    {
      url: 'https://www.w3schools.com/html/movie.mp4',
      type: 'video',
      header: {
        heading: 'Video Story',
        subheading: 'Posted 2 minutes ago',
        profileImage: 'https://via.placeholder.com/100x100.png?text=VS',
      },
      duration: 8000,
    },
  ];

  return (
    <Container className="my-5">
      <Row>
        <Col md={12}>
          <h2 className="text-center">Instagram-Like Stories</h2>
          <Stories
            stories={stories}
            defaultInterval={1500}
            width={432}
            height={768}
            storyContainerStyles={{ borderRadius: '10px', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}
            progressStyles={{
              backgroundColor: 'rgba(0, 0, 0, 0.2)',
              height: '5px',
            }}
            loop={true}
            keyboardNavigation={true}
            onStoryStart={(index) => console.log(`Story ${index + 1} started`)}
            onStoryEnd={(index) => console.log(`Story ${index + 1} ended`)}
            onAllStoriesEnd={() => console.log('All stories ended')}
          />
        </Col>
      </Row>
      <Row>
        <Col className="text-center">
          <Button variant="primary" onClick={() => alert('Additional Action')}>
            Add Action
          </Button>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

import React from 'react';

import Stories from 'react-insta-stories';

import { Container, Row, Col, Button } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

const stories = [

{

url: 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=600',

header: {

heading: 'John Doe',

subheading: 'Posted 5 minutes ago',

profileImage: 'https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=600',

duration: 3000,

{

url: 'https://images.pexels.com/photos/1181298/pexels-photo-1181298.jpeg?auto=compress&cs=tinysrgb&w=600',

header: {

heading: 'Jane Smith',

subheading: 'Posted 15 minutes ago',

profileImage: 'https://images.pexels.com/photos/1181298/pexels-photo-1181298.jpeg?auto=compress&cs=tinysrgb&w=600',

duration: 5000,

{

url: 'https://www.w3schools.com/html/movie.mp4',

type: 'video',

header: {

heading: 'Video Story',

subheading: 'Posted 2 minutes ago',

profileImage: 'https://via.placeholder.com/100x100.png?text=VS',

duration: 8000,

];

return (

<Row>

<h2 className="text-center">Instagram-Like Stories</h2>

<Stories

stories={stories}

defaultInterval={1500}

width={432}

height={768}

storyContainerStyles={{ borderRadius: '10px', boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)' }}

progressStyles={{

backgroundColor: 'rgba(0, 0, 0, 0.2)',

height: '5px',

}}

loop={true}

keyboardNavigation={true}

onStoryStart={(index) => console.log(`Story ${index + 1} started`)}

onStoryEnd={(index) => console.log(`Story ${index + 1} ended`)}

onAllStoriesEnd={() => console.log('All stories ended')}

</Col>

</Row>

<Row>

<Button variant="primary" onClick={() => alert('Additional Action')}>

Add Action

</Button>

</Col>

</Row>

</Container>

);

};

export default App;

React.js Instagram Stories Builder Component Using react-insta-stories Library With Examples in JS

Comments

Leave a Reply Cancel reply

Archives