You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.0 KiB
40 lines
1.0 KiB
import React, { useState, useEffect } from "react"; |
|
import { connect } from "react-redux"; |
|
|
|
function FloatWithMouse({ floatMouseToggle }) { |
|
const [left, setLeft] = useState(null); |
|
const [top, setTop] = useState(null); |
|
|
|
useEffect(() => { |
|
window.addEventListener("mousemove", (e) => { |
|
if (floatMouseToggle) { |
|
setLeft(e.pageX); |
|
setTop(e.pageY); |
|
} |
|
}); |
|
}); |
|
|
|
return ( |
|
<> |
|
{floatMouseToggle && ( |
|
<div |
|
className="absolute rounded-full transition-a;; duration-1000 ease-out" |
|
style={{ |
|
left: left - 500, |
|
top: top - 500, |
|
width: 1000, |
|
height: 1000, |
|
background: |
|
"radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 55%)", |
|
}} |
|
></div> |
|
)} |
|
</> |
|
); |
|
} |
|
|
|
const mapStateToProps = (state) => ({ |
|
floatMouseToggle: state.scrollAction.floatMouseToggle, |
|
}); |
|
|
|
export default connect(mapStateToProps, {})(FloatWithMouse);
|
|
|