react-modal-hover v1.1.13

react-modal-hover

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

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

ContentStyles

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

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 ⚠️ :

Example with Fades

<ModalHover
    Fades={{backFadeIn:".5s linear", contFadeIn:".5s linear"}}
    legendMsg="info"
    >
  <div>Im other div that wants to be hovered</div>
<ModalHover/>

TypeScript

This package does support TypeScript 🥰

Follow me! ✨

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

TypeScript support thanks to @ciensprog 🧡