-
Notifications
You must be signed in to change notification settings - Fork 248
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is Paused prop not working #291
Comments
Hello, I've been reviewing your code, and I noticed that you're using a ternary operator to conditionally render, but the code is incomplete, component based on the {isPaused ? : } |
@NagapavanTechWorm isPause is a local boolean state like this const [isPause,setIsPause] = useState(false) |
|
I'm working with react-insta-stories and passing the prop of isPaused but my stories keeps playing. Here is my component
import { Box, Flex, rem } from "@mantine/core";
import { Fragment, useState } from "react";
import Head from "next/head";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
import ArticleCard from "@/components/common/article/Card";
import { Story } from "@/defs/Types";
import ReactInstaStories from "react-insta-stories";
import useBreakpoints from "@/components/common/CustomHooks/useBreakPoints";
import { FaAngleLeft, FaAngleRight, } from "react-icons/fa";
import { MdPause } from "react-icons/md";
import { TiTimes } from "react-icons/ti";
import { BiPlay } from "react-icons/bi";
import styled from "@emotion/styled";
import Link from "next/link";
export default function StoryBlog({
storyData,
}: InferGetServerSidePropsType) {
const { xs } = useBreakpoints()
const [currentSlide, setCurrentSlide] = useState(0);
const [isPaused, setIsPaused] = useState(false)
const handleNext = () => {
setCurrentSlide((prevSlide) => (prevSlide + 1) % storySlides.length);
};
const handlePrevious = () => {
setCurrentSlide((prevSlide) =>
prevSlide === 0 ? storySlides.length - 1 : prevSlide - 1
);
};
const storySlides = storyData.attributes.slides.map((slide : Slides) => ({
content: () => (
<ArticleCard w={xs ? '244px' : '350px'} story={slide.text} category="TOPICNAME" image={slide.image} height={xs ? rem(380) : rem(500)} />
),
}));
return (
<Flex justify={'center'} direction={'column'} align={'center'} w={'100%'} h={'100vh'} bg={'linear-gradient(0deg, rgba(11, 34, 64, 0.81) 0%, rgba(11, 34, 64, 0.81) 100%), linear-gradient(212deg, rgba(253, 37, 178, 0.70) 0%, rgba(72, 66, 193, 0.70) 100%)'}>
{storyData.attributes.slides.length > 0 &&
<Box pos={'relative'}>
<Cross href={'/blog/stories'}>
<Box pos={'absolute'} top={'-5%'} right={'6%'} onClick={() => setIsPaused(!isPaused)}>{isPaused ? : }
<Flex w='100%' justify={'space-between'} pos={'absolute'} top={'40%'}>
<FaAngleLeft size={xs ? 14 : 22} />
<FaAngleRight size={xs ? 14 : 22} />
<ReactInstaStories
stories={storySlides}
defaultInterval={5000}
width={xs ? 350 : 500}
height={xs ? 500 : 600}
currentIndex={currentSlide}
loop
isPaused={isPaused}
storyContainerStyles={{ background: 'transparent'}}
/>
}
);
}
const Cross = styled(Link)
text-decoration: none; position: absolute; right: 0; top: -5%;
const BoxCross = styled(Link)
text-decoration: none; position: absolute; right: 2%; top: 2%;
const Card = styled(Flex)
outline: 0; box-sizing: border-box; border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 0 1.25rem 1.5625rem -0.3125rem, rgba(0, 0, 0, 0.04) 0 0.625rem 0.625rem -0.3125rem; height: 700px; justify-content: center; align-items: center; background-size: cover; background-position: center; border-radius: 1.0625rem; cursor: pointer; width: 500px; @media (max-width: 786px) { width: 350px; height: 500px; }
const ButtonBox = styled(Flex)
border-radius: 30px; border: 1.5px solid #E1E1E1; background: #FFF; box-shadow: 0px 9px 9px 3px rgba(0, 0, 0, 0.10); justify-content: center; align-items: center; height: 60px; width: 60px; cursor: pointer; z-index: 1000; @media (max-width: 600px) { height: 30px; width: 30px; }
The text was updated successfully, but these errors were encountered: