npm i hoverbox -S
HoverBox is a div box that manage hover state, u can pass every prop as a value or function.When porp is function, final prop is calculate with this function.
import React from 'react';
import HoverBox from 'hoverbox';
// dynamic children and fixed style
<HoverBox
style={{color: 'red'}}>
{isHover => {
if (isHover){
return <p>is hover</p>
}else{
return <p>not hover</p>
}
}}
</HoverBox>
// dynamic style and fixed children
<HoverBox
style={isHover => ({color: isHover ? 'red' : 'blue'})}>
Hello HoverBox
</HoverBox>
See the Pen HoverBox Demo
there is also a FocusBox
import {FocusBox} from 'hoverbox';