# react-hover-button

> A react component based on React Hooks

Latest version **0.4.3** (published 2019-01-12) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.3 |
| Published | 2019-01-12 |
| First published | 2018-12-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 665.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Angelki |
| Maintainers | zarks |
| Keywords | react, button, react hooks |

## Links

- npm: https://www.npmjs.com/package/react-hover-button
- Repository: https://github.com/Angelki/react-hover-button
- Homepage: http://3zhome.com/react-hover-button
- Issues: https://github.com/Angelki/react-hover-button/issues
- npm.io page: https://npm.io/package/react-hover-button

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.3 (latest) — 2019-01-12
- 0.4.2 — 2019-01-07
- 0.3.4 — 2019-01-06
- 0.3.3 — 2019-01-06
- 0.3.2 — 2019-01-05
- 0.3.1 — 2019-01-05
- 0.2.1 — 2019-01-05
- 0.2.0 — 2019-01-05
- 0.1.7 — 2019-01-01
- 0.1.6 — 2019-01-01
- 0.1.5 — 2019-01-01
- 0.1.4 — 2019-01-01
- 0.1.3 — 2018-12-31
- 0.1.2 — 2018-12-31
- 0.1.1 — 2018-12-31

## README

![btn](./btn.gif)

A Button Component of React. Inspired By [Hover/focus effects](https://codepen.io/thebabydino/pen/vQNVQe/")

## Get Started

### install

```bash
npm i react-hover-button
```

### usage

```jsx
import React, { useEffect, useRef, useState } from "react";
import { render } from "react-dom";
import { HoverButtonDiagonal } from "react-hover-button";

function ButtonDemoList() {
  const hoverBtn = useRef(null);
  const [loading, switchLoading] = useState(false);
  useEffect(_ => {
    hoverBtn.current.addEventListener(
      "click",
      _ => switchLoading(prev => !prev),
      false
    );
  }, []);

  return (
    <div ref={hoverBtn}>
      <HoverButtonDiagonal width={300} color="#333" loading={loading}>
        Hover me!
      </HoverButtonDiagonal>
    </div>
  );
}
render(<ButtonDemoList />, document.getElementById("root"));
```

#### Props List

```json
  color = "#000"，//font color
  width = "12em", // button width
  height,   // button height and lineheight
  background, // buton backgound
  maskColor, // mask color and background color
  children = "Hover me",
  onClick,
  loading = false,
  disabled = false
```

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