'How to specify custom mouse cursor with JSX style

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?

Solution 1:^[1]

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.

Solution 2:^[2]

For anyone else who finds this off Google, here is everything you need to do:

Put the cursor image in your public (not src) folder
Add style={{cursor: 'url(cursor.png),auto'}} to your component

Full example:

public/
- cursor.png
- 404.html
- favicon.ico
- etc
src/
- App.js

App.js:

import React from 'react';

function App() {
  return (
    <div style={{cursor: 'url(cursor.png), auto'}}>
      Mouse over me for your custom cursor!
    </div>
  );
}

export default App;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	carl
Solution 2	Dr-Bracket

'How to specify custom mouse cursor with JSX style

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]