CODEWITHSUNDEEP
javascriptreactjsnext.js
guynumerouno
guynumerouno

Reputation: 217

Delay a default event in React

I am trying to delay a page change in react so that i can add a fade out animation so i need to delay the click event before the page actually changes. Im currently using React.

Here is my code so far.


export default function Modal({setTopOf}) {
  const {globalState:{isOpen}, dispatch} = useContext(GlobalContext)
  return (
    <Contain>
      <Outer isOpen={isOpen} onClick={()=>{
         dispatch({type:'setOpen',value:false})
        
      }}></Outer>
      <Inner isOpen={isOpen}>
        {
          nav.map(nav => <Link href={nav.link}><P onClick={(e)=>{
          
            e.preventDefault()


          }}><a>{nav.name}</a></P></Link>)
        }
      </Inner>
    </Contain>
  )
}

The prevent default will stop the page change and then i want to send the event after a 0.2 second delay, any ideas?

Upvotes: 0

Views: 704

Answers (2)

guynumerouno
guynumerouno

Reputation: 217

I ended up using this which seems to work



import React from 'react'
import {useRouter} from 'next/router'

export default function CustomLink(props) {
  const path = props.path
  const delay = props.delay || 2000
  
  // get the delay from a theme somehow

  

  const router = useRouter()

  return (
    <span onClick={()=>{
      setTimeout(()=>{
        router.push(path)
      },delay)
    }}>
      {props.children}
    </span>
  )
}

Upvotes: 0

Mesut U&#231;ar
Mesut U&#231;ar

Reputation: 162

export default function Modal({setTopOf}) {
    const {globalState:{isOpen}, dispatch} = useContext(GlobalContext)
    const [firstClick, setFirstClick] = useState(false)

    const delayedPageChange = (e) => {
        
        if(!firstClick) {
            e.preventDefault()
            setFirstClick(true)
            setTimeout(() => {
                e.currentTarget.click()
            },200)
        } else {
            setFirstClick(false)
        }
    }
    return (
      <Contain>
        <Outer 
            isOpen={isOpen}
            onClick={()=>{ dispatch({type:'setOpen',value:false})}}
        />     
        <Inner isOpen={isOpen}>
          {
            nav.map(nav => (
                <Link href={nav.link}>
                    <P onClick={delayedPageChange}>
                        <a>{nav.name}</a>
                    </P>
                </Link>
                )
            )
          }
        </Inner>
      </Contain>
    )
  }

Try this with setTimeout end event re-trigger management.

Upvotes: 1

Related Questions