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

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);