react-cat-paws v0.3.0

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

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 the vite.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.