This repo is no longer maintained because I'm focus on MusicWall
Hovering over the desired component will open a modal with another component shown as information
Take care with the width
of the element you want to hover 🤟
🚀 Live Demo: https://onlyMastering.com/devmode
npm i react-modal-hover
import { ModalHover } from 'react-modal-hover'
<ModalHover onHover={<h3>Hello World</h3>}>
<div>Hover Me!</div>
<ModalHover/>
ℹ️ it's recommended to use <div>
as first child, then whatever you want 😃
ℹ️ Main props of the component, legendMsg is ? because is the typical tooltip map legend
ℹ️ if option active={false}
ModalHover will not be even visible on the html
Option | Type | Default | Description |
---|---|---|---|
active | boolean | true | activate all the hover option |
legend | boolean | true | legend on top of your hover component |
legendPos | string | right | position of the legend on your hover component |
legendMsg | string | ? | message of the legend |
<ModalHover onHover={<MySocialMediaComponent/>} legendPos="left" legendMsg="Follow me!">
<div>Author: Carlos Torres</div>
<ModalHover/>
ℹ️ Styling props, you can add it on objects or direct CSS, check examples below
Option | Type | Default | Description |
---|---|---|---|
backgroundColor | string | rgba(0, 0, 0, 0.75) | background-color, better with some transparency |
Option | Type | Default | Description |
---|---|---|---|
backgroundColor | string | rgba(0, 0, 0, 1) | content css property |
maxWidth | string | 100% | content css property |
borderRadius | string | 8px | content css property |
boxShadow | string | 0 0 10px 2px black | content css property |
color | string | white | content css property |
padding | string | 10px 20px | content css property |
border | string | 2px solid grey | content css property |
marginLeft | string | 20px | content css property |
marginRight | string | 20px | content css property |
const MyContentStyles = {
backgroundColor: "white",
color: "black",
padding: "20px 40px"
}
...
<ModalHover ContentStyles={MyContentStyles} onHover={<MyCompOnHover/>} legendMsg="HOVER ME!">
<div>Im a div that wants to be hovered</div>
<ModalHover/>
Option | Type | Default | Description |
---|---|---|---|
color | string | white | Legend css property |
backgroundColor | string | orange | Legend css property |
borderRadius | string | 50px | Legend css property |
minHeight | string | 20px | Legend css property |
minWidth | string | 20px | Legend css property |
padding | string | 2px 2px | Legend css property |
display | string | flex | Legend css property |
justifyContent | string | space-around | Legend css property |
alignItems | string | center | Legend css property |
cursor | string | pointer | Legend css property |
boxShadow | string | 0 0 5px 0 black | Legend css property |
fontSize | string | 16px | Legend css property |
fontWeight | string | bold | Legend css property |
marginTop | string | 0px | Legend css property |
marginLeft | string | 0px | Legend css property |
<ModalHover
ContentStyles={{color:"red", padding:"20px"}}
LegendStyles={{backgroundColor:"red"}}
onHover={<MyCompOnHover/>}
legendMsg="info"
>
<div>Im other div that wants to be hovered</div>
<ModalHover/>
ℹ️ You can set fade-in/out props to the background and the content, do it carefully
Option | Type | Default | Description |
---|---|---|---|
backFadeIn | string | 1s ease | recommended fade in for background |
backFadeOut | string | .3s ease | recommended fade out for background |
contFadeIn | string | 1s ease | recommended fade in for content |
contFadeOut | string | .3s ease | recommended fade out for content |
<ModalHover
Fades={{backFadeIn:".5s linear", contFadeIn:".5s linear"}}
legendMsg="info"
>
<div>Im other div that wants to be hovered</div>
<ModalHover/>
This package does support TypeScript 🥰
GitHub | @carlostorreswav
Twitter | @carlostorreswav
Linkedin | Carlos Torres