react-modal-hover

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 🤟

Usage no npm install needed!

<script type="module">
  import reactModalHover from 'https://cdn.skypack.dev/react-modal-hover';
</script>

README

react-modal-hover

drawing

How it works 🤔

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 🤟

There are 3 main elements on this component:

1 - Content: the element to show when user hover the element

2 - Legend: the element to make users know some element is hoverable

3 - Background: a black transparent window when you hover


🚀 Live Demo: https://onlyMastering.com/devmode__


✨ Quick Start ✨

Install package from npm đŸ“Ĩ

npm i react-modal-hover

Import it on your .js đŸ“Ĩ

import { ModalHover } from 'react-modal-hover'

Prepare your "onHover" component or just a simple string

<ModalHover onHover={<h3>Hello World</h3>}>
  <div>Hover Me!</div>
<ModalHover/>

ℹī¸ it's recommended to use <div> as first child, then whatever you want 😃

General Props

ℹī¸ 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

Example

<ModalHover onHover={<MySocialMediaComponent/>} legendPos="left" legendMsg="Follow me!">
  <div>Author: Carlos Torres</div>
<ModalHover/>

Styled Props (CSS)

ℹī¸ Styling props, you can add it on objects or direct CSS, check examples below

BackgroundStyles

Option Type Default Description
backgroundColor string rgba(0, 0, 0, 0.75) background-color, better with some transparency

ContentStyles

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

Example with object

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/>

LegendStyles

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

Example with direct css insert (just like in React)

<ModalHover
    ContentStyles={{color:"red", padding:"20px"}}
    LegendStyles={{backgroundColor:"red"}}
    onHover={<MyCompOnHover/>}
    legendMsg="info"
    >
  <div>Im other div that wants to be hovered</div>
<ModalHover/>

Fades

ℹī¸ 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
#### Example with Fades
```
<ModalHover
Fades={{backFadeIn:".5s linear", contFadeIn:".5s linear"}}
legendMsg="info"
>
Im other div that wants to be hovered
```

TypeScript

This package does support TypeScript đŸĨ°


Follow me! ✨

GitHub | @carlostorreswav
Twitter | @carlostorreswav
Linkedin | Carlos Torres

TypeScript support thanks to @ciensprog 🧡