react-cat-paws
v0.3.0
Published
A React component library for adding a cat paw overlay to your web app.
Downloads
10
Readme
React - CatPaws
A React component library for adding a cat paw overlay to your web app.
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
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 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 thevite.config.ts
.
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 to build and package the React library.