How to specify custom mouse cursor with JSX style

javascript reactjs react-jsx

10,919

I believe I figured this out. There were two things wrong, and Josh pointed one of them out. Sorry if anyone wasted much time on this, but for the record:

The basic problem is that I used an online image converter to convert an image to .cur format and I now believe it returns corrupt or at least inadequate .cur files.

When I tried .png format instead with a fallback value as Josh suggested, I can make custom cursors work on Chrome and Firefox. I will have to find some better tool to make a proper .cur file for IE still as it only supports the .cur (and .ani) formats. I was able to use another .cur file I found online somewhere which does work with IE as documented.

[I know that I said I was able to use my "inadequate" .cur file with plain HTML outside of React; I must have been trying too many things at once. Today I can't make that work either. Sorry for the misleading reply.]

So JSX doesn't require anything special other than a valid cursor image file and a fallback built-in cursor.

<Component
 style={{ cursor: 'url(images/special.png),auto' }}
/>

Thanks.

10,919

Author by

carl

Updated on June 24, 2022

Comments

carl almost 2 years
How can I specify a custom mouse cursor using a JSX inline style?

This works fine:
```
<Component
 style={{ cursor: 'crosshair' }}
/>
```
but I cannot seem to get anything along the lines of
```
<Component
 style={{ cursor: 'url(images/special.cur)' }}
/>
```
to work. Elsewhere I am successfully getting static images from the same location
```
<img
 src="images/example.png"
/>
```
so I believe the server is set up properly.

I've tried Chrome, Firefox, and IE 11.

I know must be doing something fundamentally wrong. How do I do this?

Thanks very much!

EDIT

(StackOverflow seems not to approve of the continued comment thread so let me address Josh's latest point as an edit instead.)

Yes, a plain HTML element gets the custom cursor. I agree it must be a syntax problem, but what is the correct syntax for cursor: url(file) in JSX? That is what I'm trying to figure out. Thanks again!
```
<body>
    <input style="cursor: url(images/special.cur),auto;" type="img" src="images/example.png" />    
    <div id="container"></div>
...
</body>
```
where the <input> gets my special cursor and the "container" <div> is where my React components are rendered.

I also realize that I hadn't mentioned before that I am using React-Bootstrap components for my interface. I know that Bootstrap adds lots of styles but I wouldn't think they would "win" in this case, would they?