# react-cat-paws

> A React component library for adding a cat paw overlay to your web app.

Latest version **0.3.0** (published 2023-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-cat-paws
pnpm add react-cat-paws
yarn add react-cat-paws
bun add react-cat-paws
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2023-07-28 |
| First published | 2022-11-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | drhaid |

## Links

- npm: https://www.npmjs.com/package/react-cat-paws
- Homepage: https://github.com/DrHaid/react-cat-paws
- npm.io page: https://npm.io/package/react-cat-paws

## Recent versions

- 0.3.0 (latest) — 2023-07-28
- 0.2.3 — 2022-11-02
- 0.2.2 — 2022-11-02

## README

# React - CatPaws

A React component library for adding a cat paw overlay to your web app.

![preview](https://raw.githubusercontent.com/DrHaid/react-cat-paws/main/preview.gif)

## Install & Use

```
npm install react-cat-paws
```

Include the `<CatPaws/>` component in your application.

### Component Props
|name|default|description|
|---|---|---|
|fillScreen|`false`|If `true` then the CatPaws canvas will fill the entire screen instead of just its parent container. |
|onClose|`undefined`|Handler for the close button. Only renders the button if a handler is defined.|

### Example implementation
```typescript
const App = () => {
  const [showCatPaws, setShowCatPaws] = useState(false);

  return (
    <> 
      <p>Hello World!</p>
      
      <button onClick={() => setShowCatPaws(true)}> click me! </button>
      {showCatPaws && 
        <CatPaws 
          onClose={() => setShowCatPaws(false)}
          fillScreen
        />}
    </>
  );
}
```

## ⚠️ Troubleshooting
- When using this package with [Vite](https://vitejs.dev/) a side effect of the automatic caching might cause the images not to load.  
To work around that exclude _react-cat-paws_ from the dependency optimization in the `vite.config.ts`.
``` typescript
export default defineConfig({
  ...
  optimizeDeps: {
    exclude: [ "react-cat-paws" ]
  },
  ...
})
```

---
This project is inspired by the cat Easter egg by Google: https://g.co/kgs/wk2hPY  
However, while heavily inspired, all images were painted by me to match Google's style.

Uses [Parcel](https://parceljs.org/) to build and package the React library.

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