# react-hover-component

> React component that FINALLY allows you to implement the CSS hover functionality.

Latest version **3.0.0** (published 2018-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hover-component
pnpm add react-hover-component
yarn add react-hover-component
bun add react-hover-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2018-11-02 |
| First published | 2018-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yann Cedric Ngadeu |
| Maintainers | yannced |

## Links

- npm: https://www.npmjs.com/package/react-hover-component
- Repository: https://github.com/YannCedric/react-hover
- Homepage: https://github.com/YannCedric/react-hover#readme
- Issues: https://github.com/YannCedric/react-hover/issues
- npm.io page: https://npm.io/package/react-hover-component

## Recent versions

- 3.0.0 (latest) — 2018-11-02
- 2.2.2 — 2018-11-02
- 2.2.1 — 2018-11-02
- 2.2.0 — 2018-11-02
- 2.1.3 — 2018-11-02
- 2.1.2 — 2018-11-02
- 2.1.1 — 2018-11-02
- 2.1.0 — 2018-11-02
- 2.0.3 — 2018-11-02
- 2.0.2 — 2018-11-02
- 2.0.1 — 2018-11-02
- 2.0.0 — 2018-11-02
- 1.0.4 — 2018-08-17
- 1.0.3 — 2018-08-16
- 1.0.2 — 2018-08-16
- … 2 more at https://npm.io/package/react-hover-component/versions

## README

# ReactJS Hover Component

React component that FINALLY allows you to implement the CSS hover functionality.

## Install and usage


1. `npm install react-hover-component`

2. Example usage 
   
``` jsx
import hover from 'react-hover-component'

...

    render(){
        return (
            <hover.div 
                style={{height: 100, 
                        width:100, 
                        backgroundColor: 'red',
                        transitionDuration: '1s'}}
                hover={{width:50}}>
                <div>
                    ...
                </div>
            </hover.div> 
        )
    }

...
```

3. You can use hover.div, hover.text, hover.img... (more to come, feel free to contribute on [Github](https://github.com/YannCedric/react-hover)

# Props

* **style** - OBJECT - object with styling properties. (Add the transitionDuration property to make the transition smoother). **PS** : The styles are applied to the child of the Hover component. The property is set to 0.3 seconds by default
* **hover** - OBJECT - object with styling properties that will overite those in the base style property. No need to repeat styles declared in the style prop. Just provide the new styles to apply when hovering.

---
_Source: https://npm.io/package/react-hover-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._