-
-
Save necolas/1c494e44e23eb7f8c5864a2fac66299a to your computer and use it in GitHub Desktop.
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; | |
/** | |
* Touch devices emulate mouse events. This functions makes it possible to know | |
* if the current modality supports hover (including for multi-modality | |
* devices). | |
*/ | |
const createHoverMonitor = () => { | |
let isHoverEnabled = false; | |
let lastTouchTime = 0; | |
function enableHover() { | |
if (isHoverEnabled || Date.now() - lastTouchTime < 500) { | |
return; | |
} | |
isHoverEnabled = true; | |
} | |
function disableHover() { | |
lastTouchTime = new Date(); | |
if (isHoverEnabled) { | |
isHoverEnabled = false; | |
} | |
} | |
if (canUseDOM) { | |
document.addEventListener('touchstart', disableHover, true); | |
document.addEventListener('mousemove', enableHover, true); | |
} | |
return { | |
get isEnabled() { | |
return isHoverEnabled; | |
} | |
}; | |
}; | |
export default createHoverMonitor; |
import createHoverMonitor from './createHoverMonitor'; | |
import { element, func, oneOfType } from 'prop-types'; | |
import React, { Component } from 'react'; | |
const hover = createHoverMonitor(); | |
/** | |
* Use: | |
* <Hoverable> | |
* {(hover) => <View style={hover && styles.hovered} />} | |
* </Hoverable> | |
* | |
* Example: https://imaginary-lycra.glitch.me/ | |
* Example source: https://glitch.com/edit/#!/imaginary-lycra | |
*/ | |
class Hoverable extends Component { | |
static displayName = 'Hoverable'; | |
static propTypes = { | |
children: oneOfType([func, element]).isRequired, | |
onHoverIn: func, | |
onHoverOut: func | |
}; | |
state = { isHovered: false }; | |
_handleMouseEnter = e => { | |
if (hover.isEnabled && !this.state.isHovered) { | |
const { onHoverIn } = this.props; | |
if (onHoverIn) { | |
onHoverIn(); | |
} | |
this.setState(() => ({ isHovered: true })); | |
} | |
}; | |
_handleMouseLeave = e => { | |
if (this.state.isHovered) { | |
const { onHoverOut } = this.props; | |
if (onHoverOut) { | |
onHoverOut(); | |
} | |
this.setState(() => ({ isHovered: false })); | |
} | |
}; | |
render() { | |
const { | |
children, | |
/* eslint-disable */ | |
onHoverIn, | |
onHoverOut | |
/* eslint-enable */ | |
} = this.props; | |
const child = typeof children === 'function' ? children(this.state.isHovered) : children; | |
return React.cloneElement(React.Children.only(child), { | |
onMouseEnter: this._handleMouseEnter, | |
onMouseLeave: this._handleMouseLeave | |
}); | |
} | |
} | |
export default Hoverable; |
Here's my version, which uses TypeScript, hooks, and Reanimated shared values instead of re-renders: https://gist.github.com/nandorojo/066ff2f40419b7e06054cc7282e24f8d
In the code I'm working in, the render props pattern is something that is used seldomly. Instead a Pressable is used as a controlled component like so:
const [isHovered, setIsHovered] = useState(false);
return (
<Pressable
onHoverIn={() => setIsHovered(true)}
onHoverOut={() => setisHovered(false)}
style={ isHovered ? { backgroundColor: 'blue' } : {} }
>
...
</Pressable>
);
In this case, I was able to replace the onHoverIn
and onHoverOut
props with onMouseEnter
and onMouseLeave
and it works like a charm on react-native-web.
const [isHovered, setIsHovered] = useState(false);
return (
<Pressable
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setisHovered(false)}
style={ isHovered ? { backgroundColor: 'blue' } : {} }
>
...
</Pressable>
);
I think onHoverIn/Out is a better version of that which accounts for other conditions.
@nandorojo If you look closely at the gist, you will see that the hover is accomplished using the same approach. Only instead of appending the onMouseEnter
and onMouseLeave
props to the child and rendering the child using the render props pattern, the example I shared adds onMouseEnter
and onMouseLeave
explicitly.
I actually don't have that problem at all, using React Native Paper's
Dialog
.Hoverable.mov