score:0
there are already 2 good answers, but i'll add this one too, because other answers are overcomplicating the solution
- flickering
it doesn't matter if you use ref or state, you should just extract your cursor to separate component, that way your app component will not rerender
- scrollbars
as other anwers mentioned, using
body { overflow: hidden; }
will solve this problem, but partially. your cursor is trying to go beyond page size, hence page is showing scrollbars, adding limitation for cursor position will solve this:cursor.y = math.max(0, math.min(currentpositiony, page.width))
(pseudo-code) nowcursor.y
will not exceed 0 or page.width
score:1
edit - overflowing body (aka third problem)
if you'll add this to your body tag it should solve it:
margin: 0;
height: 100%;
overflow: hidden
edit - regarding your second problem
to prevent scroll bars to appear, you can use overflow-y: hidden;
(to disable on the x-axis just change the overflow-y
to overflow-x
, overflow: hidden;
for both)
but if you would like to enable scrolling but just hide the scrollbar, use the following code:
/* hide scrollbar but allow scrolling */
body {
-ms-overflow-style: none; /* for internet explorer, edge */
scrollbar-width: none; /* for firefox */
overflow-y: scroll;
}
body::-webkit-scrollbar {
display: none; /* for chrome, safari, and opera */
}
here is a gif of a working example on my browser: https://imgur.com/a/wov7car
it doesn't get cut off for me on the right side (see image below). it sounds like the second problem happens because your cursor gets re-rendered every time you move it, and that's a ton of work for your site!
you should remove the style attributes from the cursor component and adjust the code inside your event listener for a mousemove event. it will look like this:
onmousemove = {e => {
const cursor = document.queryselector('.cursor')
cursor.style.top = ׳${e.pagey}px׳
cursor.style.left = ׳${e.pagex}px׳
}}
score:1
flickering:
#01:
simply introduce a transition style on the cursor component, eg transition: "all 50ms"
. it makes the position change much more smoother and cancels the flickering.
#02:
however as guy mentioned above, handling the cursor's position in a state means a lot of re-rendering for your component which makes you app slower in the end.
i'd recommend making a ref
for the cursor and update it directly from an event listener. with that change you can even remove the usemouse
hook:
const app = () => {
const containernoderef = useref(null);
const cursorref = useref(null)
const updatemouse = (e) => {
// you can directly access the mouse's position in `e`
// you don't even need the usemouse hook
cursorref.current.style.top = `${e.y - size / 2}px`
cursorref.current.style.left = `${e.x - size / 2}px`
}
useeffect(() => {
window.addeventlistener('mousemove', updatemouse)
return () => {
window.removeeventlistener('mousemove', updatemouse)
}
})
return (
<div
ref={containernoderef}
style={{
width: window.innerwidth,
height: window.innerheight,
display: "flex",
flexdirection: "column",
justifycontent: "center",
alignitems: "center",
cursor: 'none'
}}
>
<cursor ref={cursorref} />
<h1>hello codesandbox</h1>
<h2>start editing to see some magic happen!</h2>
</div>
);
}
const cursor = forwardref(({ size = size }, ref) => (
<div
ref={ref}
style={{
position: "absolute",
width: size,
height: size,
backgroundcolor: "black",
color: "white",
fontweight: "bold",
display: "flex",
justifycontent: "center",
alignitems: "center"
}}>
hello
</div>
)
)
cut off issue:
since you're moving around an actual div
as your cursor, when it reaches the border of your document
, it stretches it to make the div
fit -> this is why the document doesn't fit into your window anymore thus the scrollbars are rendered.
you can fix it via css:
body { overflow: hidden }
+1:
i'm not sure how your cursor has to look like in the end, but if it'd be an image, there is an other possible solution. add this css rule to your container, which loads an image as a cursor and then the browser takes care about the rendering automatically:
<div
ref={containernoderef}
style={{
// ...
cursor: 'url("url"), auto'
}}
>
if you'd use this solution then the whole cursor
component and position calculation wouldn't be needed anymore. however the downside is, that it only works with images.
Source: stackoverflow.com
Related Query
- Customise cursor pointer using a react component
- React - cursor pointer in component and child without directly CSS
- Default property value in React component using TypeScript
- Using async/await inside a React functional component
- Testing React Functional Component with Hooks using Jest
- Best way to create new React component using create-react-app
- How to make the whole Card component clickable in Material UI using React JS?
- Using Jest to mock a React component with props
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- Testing react component enclosed in withRouter (preferably using jest/enzyme)
- Prevent react component from rendering twice when using redux with componentWillMount
- How to declare defaultProps on a React component class using TypeScript?
- How to prevent child component from re-rendering when using React hooks and memo?
- React native text component using number of lines
- How to submit form component in modal dialogue using antd react component library
- How to unit test a style of a React Component using Jest.js?
- Submit Form using Button in Parent Component in React
- Mocha, Enzyme: Unit testing custom functions in react component using enzyme
- Detect click outside React component using hooks
- Checking if a component is unmounted using react hooks?
- React useState - using one State per component vs multiples states?
- using css modules in react how can I pass a className as a prop to a component
- Using a regular javascript library inside a React component
- how to render a react component using ReactDOM Render
- Testing changes to React component state and spying on instance methods using enzyme
- How to pass the match when using render in Route component from react router (v4)
- Update React Context using a REST Api call in a functional component
- Error using component done with react,redux and react-redux and build with webpack in react application
- Load custom native component in react native using expo kit
- React render component using its name
More Query from same tag
- Rendering react components multiple times based on cookies
- Delete selected rows from an array
- react How to hide the Card when another location is pressed
- React - update object in state
- VSCode auto import - how to force Material-UI full path import
- React - SetState handler Method
- I keep seeing 'XRWebGLLayer' is not defined no-undef' when using three.js in react.js to create WebXR app
- Reactotron doesn't work with NextJS because of SSR
- How do I resolve a Uncaught TypeError: Cannot convert null or undefined to object?
- How can I convert popover MATERIAL-UI functional component to class based component?
- React-router changes location but doesn't render component
- How to change the style of a ListItem on click?
- Passing array to props but getting error while iterating
- Get Message From Kafka, send to Rsocket and Receive it from React client
- capture click event on iframe
- React changing route breaks height with layout
- How to get temperature units on weather api call?
- Issue accessing state inside setInterval in React.js
- React, how to get data after clicking on checkbox?
- How to test if button was clicked?
- How to change the trigger of antd Collapse
- React hooks updating parent state through child and rerendering
- Unused var in React Hooks
- AG Grid tooltip takes long time to render
- How to declare variable of type A or B when one extends the other in Typescript
- React CSSTransition when you change page by Route
- Redirect to website after form submit in react
- Update component within handleClick React
- Can't play video on iOS in Safari: NotAllowedError: The request is not allowed by the user agent or the platform in the current context
- How do I pass a UseState to another jsx component?