Skip to main content

useMouseIcon

A hook used internally by components for setting and clearing custom mouse icons. To use this hook, you need to also render a single PluginProvider somewhere higher up in the tree.

To set the mouse icon, use the setIcon function and pass an asset url. All components under the PluginProvider that use this hook share an icon stack; the most recent component to call setIcon will have its icon set as the final mouse icon. Calling setIcon twice without clearing it in between will override the previous icon set by this component.

Calling clearIcon removes the icon set by this component from the stack, which may mean the mouse icon falls back to the next icon on the stack set by another component. Ensure you call clearIcon on unmount otherwise your icon may never get unset. For example: 

local function MyComponent()
	local mouseIconApi = useMouseIcon()

	React.useEffect(function() -- clear icon on unmount
		return function()
			mouseIconApi.clearIcon()
		end
	end, {})

	return React.createElement(SomeComponent, {
		OnHoverStart = function()
			mouseIconApi.setIcon(...) -- some icon for hover
		end,
		OnHoverEnd = function()
			mouseIconApi.clearIcon()
		end
	})
end

Types​

mouseIconApi​

</>
interface mouseIconApi {
setIcon: (icon: string) → ()
getIcon: () → string?
clearIcon: () → ()
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "mouseIconApi",
            "desc": "",
            "fields": [
                {
                    "name": "setIcon",
                    "lua_type": "(icon: string) -> ()",
                    "desc": ""
                },
                {
                    "name": "getIcon",
                    "lua_type": "() -> string?",
                    "desc": ""
                },
                {
                    "name": "clearIcon",
                    "lua_type": "() -> ()",
                    "desc": ""
                }
            ],
            "source": {
                "line": 46,
                "path": "src/Hooks/useMouseIcon.luau"
            }
        }
    ],
    "name": "useMouseIcon",
    "desc": "A hook used internally by components for setting and clearing custom mouse icons. To use this\nhook, you need to also render a single [PluginProvider] somewhere higher up in the tree.\n\nTo set the mouse icon, use the `setIcon` function and pass an asset url. All components under\nthe PluginProvider that use this hook share an icon stack; the most recent component to call\n`setIcon` will have its icon set as the final mouse icon. Calling `setIcon` twice without\nclearing it in between will override the previous icon set by this component.\n\nCalling `clearIcon` removes the icon set by this component from the stack, which may mean the \nmouse icon falls back to the next icon on the stack set by another component. Ensure you call\n`clearIcon` on unmount otherwise your icon may never get unset. For example:\n\n```lua\nlocal function MyComponent()\n\tlocal mouseIconApi = useMouseIcon()\n\n\tReact.useEffect(function() -- clear icon on unmount\n\t\treturn function()\n\t\t\tmouseIconApi.clearIcon()\n\t\tend\n\tend, {})\n\n\treturn React.createElement(SomeComponent, {\n\t\tOnHoverStart = function()\n\t\t\tmouseIconApi.setIcon(...) -- some icon for hover\n\t\tend,\n\t\tOnHoverEnd = function()\n\t\t\tmouseIconApi.clearIcon()\n\t\tend\n\t})\nend\n```",
    "source": {
        "line": 37,
        "path": "src/Hooks/useMouseIcon.luau"
    }
}