import { useState } from 'react'
import styles from '../styles/Login.module.css'
import {motion as m} from 'framer-motion'
const words = ['Sheetal','Jackie','Rohan','Narayan','Budwiser']
export default function Login() {
const [step,setStep] = useState(0)
const initial = {
transform:'translateX(100%)'
}
const animate = {
transform:'translateX(0)'
}
return (<main>
<div className={styles.carousel_parent}>
<div className={styles.track}>
{
<m.div initial={initial} animate={animate} className={styles.slides}><div>{words[step]}</div></m.div>
}
</div>
<div className={styles.controls}>
<button
disabled={step<1?true:false}
onClick={()=>{
const total = words.length;
if(step - 1 < 0){
return false
}else{
setStep(step-1)
}
}}>Prev</button>
<div className={styles.dots}>
</div>
<button
disabled={step+1>words.length-1?true:false}
onClick={()=>{
const total = words.length;
if(step + 1 > words.length-1){
return false
}else{
setStep(step+1)
}
}}>Next</button>
</div>
</div>
</main>)
}
The above is my code. What I want to acheive is when someone clicks on the next button, the slide should change with transition. I have acheived everything however the transition effect using framer motion is not working.
**What have I tried using : **
I have tried prefixing 'm.' in litrally every component but nothings seems to work.
Related
I was trying to make a react slider component but for some reasons it doesn't change/update the image on click instead it always displays the same picture. What i'm trying to achieve is when I click the button it updates index and the display image changes according to index position. Even though the index is updating the image is not changing. My attempt at creating the slider component -
import arrow from '../../img/arrow-outlined-crimson.png';
const Slider = ({ images }) => {
let index = 0;
const nextSlide = () => {
index+=1;
if (index > images.length - 1) {
index = 0
}
}
return (
<div className='slider'>
<div ref={sliderRef} className="wrapper">
<img src={images[index]} alt="" className="sliderImg" />
</div>
<img src={arrow} onClick={nextSlide} alt="Arrow" className="sliderIcon iconRight" />
</div>
)
}
export default Slider
Use React State instead of just variables.
Try this:
const [index, setIndex] = React.useState(0)
const nextSlide = () => {
setIndex(index + 1);
if (index > images.length - 1) {
setIndex(1)
}
}
i try to code two components within a game: One component is a timer-component. From here, the user can pause the game. By pressing a button within that component, a redux state (gamePaused: boolean) is changed. The second component contains a interval which should be paused/resumed by the redux state.
The problem is, that the second component will be re-rendered on the redux state change, so does the interval variable within the component. So the variable from the first rendering isnt responsive anymore and it cant be stopped or resumed.
So my first idea was, to store the interval value wihin a useMemo()-Hook. But i dont really know how the syntax should look in this case. Because i have to memoize an empty variable outside the start() and pause() functions since the interval variable has to be accessable for both functions.
Im thankful for every help. (And im open for solutions, other than those whith the useMemo Hook)
import React, { useState, useRef, useMemo } from "react";
import { connect, useDispatch } from "react-redux";
import { increment } from "../../../redux/slices/SavegameSlice";
import { addFirst } from "../../../redux/slices/OperationalDataSlice";
function GenerateNumber({ gamePaused }) {
var dispatch = useDispatch();
const [number, setnumber] = useState(Math.floor(Math.random() * 10));
const [disabled, setdisabled] = useState(false);
function increment() {
dispatch(increment(income));
dispatch(
addFirst({
icon: "",
name: "",
amount: number,
})
);
setnumber(Math.floor(Math.random() * 10));
var interval; // That is the variable i try to save
var width = 0;
var progressbar = useRef();
function start() {
clearInterval(interval);
interval = setInterval(frame, 25);
function frame() {
if (width >= 100) {
width = 0;
increment();
progressbar.current.style.width = width + "%";
clearInterval(interval);
} else {
width++;
progressbar.current.style.width = width + "%";
}
}
}
function pause() {
clearInterval(interval);
}
return (
<div className="parent">
<div className="header">
<div className="icon center-column">
</div>
<div className="caption">
<span className="caption-span">Generate Number</span>
</div>
</div>
<div className="low">
<div className="loadingbar-parent center-column">
<div className="loadingbar">
<div className="loadingbar-inner" ref={progressbar}></div>
</div>
</div>
<div className="buttonarea">
<div className="button-parent">
<button
className="workbutton center-column"
onClick={start}
disabled={disabled ? "true" : ""}
>
<span className="workbutton-span">Work</span>
</button>
<button className="workbutton center-column" onClick={pause}>
<span className="workbutton-span">Pause</span>
</button>
</div>
</div>
</div>
</div>
);
}
function mapStateToProps(state) {
return {
gamePaused: state.operationalData.value.gamePaused,
};
}
export default connect(mapStateToProps)(GenerateNumber);
I've built a grid of images coming from an API, and now I am trying to build a slider.
First image to be displayed should be the one clicked in the Grid below the slider , and when clicked next/prev go to the nex/prev img in the array.
How could I get it?
I am trying by setting the initial state of ``ìmgToShow```to the img clicked, but i get nothing in console. The idea would be to get that, and then , i still dont know how, update the state to show the next img in the Array.
album is the array of objects with all the images. Fetched in my Context component
clickedImagecontains the clicked image's URL. I get it from a click event in other component.
This is my component :
import React, { useContext, useState } from "react";
import { AlbumContext } from "../../context/AlbumContext";
import "./carousel.css";
import BtnSlider from "./BtnSlider";
function Carousel() {
const { clickedImage, albums } = useContext(AlbumContext);
const [imgToShow, setImgToShow] = useState(clickedImage);
console.log("imgTOSHOW", imgToShow); // empty in console
console.log("clickedIMG in context", clickedImage); // gives me the URL clicked
const [slideIndex, setSlideIndex] = useState(1);
const nextSlide = () => {
if (slideIndex !== albums.length) {
setSlideIndex(slideIndex + 1);
} else if (slideIndex === albums.length) {
setSlideIndex(1);
}
};
const prevSlide = () => {};
return (
<div className="container-slider">
{albums &&
albums.map((item, index) => {
return (
<div
key={item.id}
className={
slideIndex === index + 1 ? "slide active-anim" : "slide"
}
>
<img src={imgToShow} alt="" />
</div>
);
})}
<BtnSlider moveSlide={nextSlide} direction={"next"} />
<BtnSlider moveSlide={prevSlide} direction={"prev"} />
</div>
);
}
export default Carousel
I'm building a portfolio app in React JS and one of my pages is an About Me page. I stumbled upon a youtube video that builds an infinite carousel using vanilla JavaScript, and during my initial testing it worked. However, when I navigate away from my 'About Me' page and return, it explodes with a "TypeError: Cannot read property 'style' of null" within my About Me component "stepNext; src/components/about-me/AboutMe.js:34".
import React from "react";
import "./AboutMe.css"
import { Button,
Fade,
Grow,
Typography } from '#material-ui/core'
import { ArrowBackIos, ArrowForwardIos } from "#material-ui/icons";
import { Background, Adventures, Hobbies } from "./about-me-components/index";
export const AboutMe = () => {
const slider = document.querySelector('.slider-about-me')
const carousel = document.querySelector('.carousel-about-me')
let direction = 1
const stepPrevious = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
}
direction = -1
console.log("Previous", direction)
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(33%)'
}
const stepNext = () => {
if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
direction = 1
console.log("Next", direction)
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-33%)'
}
const sliderAppend = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {slider.style.transition = 'all 0.5s'})
}
return (
<>
<Fade
in={true}
timeout={1500}
>
<div
id='about-me-container'
>
<div className="controls">
<div
className='arrow-span-about-me arrow-left-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepPrevious}
>
<ArrowBackIos
className="arrow-back-about-me"
/>
</Button>
</div>
<div
className='arrow-span-about-me arrow-right-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepNext}
>
<ArrowForwardIos
className="arrow-forward-about-me"
/>
</Button>
</div>
</div>
<div
id="about-me-carousel-container"
>
<div
className='carousel-about-me'
>
<div
className='slider-about-me'
onTransitionEnd={sliderAppend}
>
<section className='text-white'><Background /></section>
<section className='text-white'><Adventures /></section>
<section className='text-white'><Hobbies /></section>
</div>
</div>
</div>
</div>
</Fade>
</>
)
}
The only reason I chose this route is because I haven't been able to find a half decent infinite carousel module with easy customization abilities. As much as I would prefer for this to work, I'm open to suggestions and/or solutions. Much appreciated!
I would suggest using useRef instead of document.querySelector
document.querySelector happens outside of that lifecycle, making what it returns unreliable, while refs happen within it. (Though doesn’t get reset because of a lifecycle event like a re-render.) This ensures the object returned by the ref is an accurate representation of the current state of the virtual DOM.
I think this is the reason why you are encountering the said error when you go away and back from the About Page.
Here's an example:
https://codesandbox.io/s/objective-fast-vhc27?file=/src/modalAndButton.jsx:531-648
I am creating a website with GatsbyJS and React and I am trying to make changes to the DOM. At first I tried to do it with JS, but after research, I found ReactDOM.
I tried it in JS, it worked at first and then it gives me an error:
(function() {
const today= new Date();
const hours = today.getHours();
const minute = today.getMinutes()
const element = document.getElementById('pintar');
if (hours >= 0 && hours < 9) {
element.innerText = 'sleeping'
}else{
element.innerText = 'Doing something else'
}
})()
What I want to do is "write" in the DOM a text, according to a condition (if statement), which is related by the current time.
When I first tried everything worked out, but when I changed the condition, and this is met, the following error appears: Target container is not a DOM element
I'm starting with React, and I'm not able to make changes to the DOM.
I copy my code to see what I must do to be able to make those changes in the DOM:
import React from "react"
import { Link } from "gatsby"
import ReactDOM from 'react-dom'
import Layout from '../components/layout'
import '../styles/index.scss'
import headerStyles from '../styles/header.module.scss'
import aboutStyles from '../styles/about.module.scss'
import { IoIosArrowRoundDown } from "react-icons/io";
import Clock from 'react-digital-clock';
const today= new Date();
const hours = today.getHours();
//const minute = today.getMinutes()
const pintar = document.getElementById('pintar');
const a = 'sleeping'
const b = 'Doing something else'
if (hours >= 0 && hours < 9) {
ReactDOM.render(a, pintar)
}else{
ReactDOM.render(b, pintar)
}
const About = () => {
return(
<Layout>
<section className={headerStyles.header_wrapper}>
<h3 className={headerStyles.header_wrapper_title}>About me</h3>
<h1 className={headerStyles.header_wrapper_main}>Hey there
</h1>
</section>
<IoIosArrowRoundDown className={headerStyles.header_arrow} />
<p id='pintar'></p>
<Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />
</Layout>
)
}
export default About
Normally, when using ReactDom.render you will be rendering something that is outside of react structure, but in your case, you are trying to render something that is inside the react structure and you shouldn't do that.
If you want to render the text inside <p id='pintar'></p> what you should do is
const About = () => {
let pintar = ''
// you can add any logic here and change pintar
if (hours >= 0 && hours < 9) {
pintar = 'something'
} else {
pintar = 'otherthing'
}
return(
<Layout>
<section className={headerStyles.header_wrapper}>
<h3 className={headerStyles.header_wrapper_title}>About me</h3>
<h1 className={headerStyles.header_wrapper_main}>Hey there
</h1>
</section>
<IoIosArrowRoundDown className={headerStyles.header_arrow} />
// rendering pintar
<p id='pintar'>{pintar}</p>
<Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />
</Layout>
)
}