0.3.0 • Published 3 years ago

react-cat-paws

Licence

MIT

Version

0.3.0

Deps

Size

1.5 MB

Vulns

Weekly

Summary Dependency Versions

React - CatPaws

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

preview

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