🤖 React Robot Vacuum

An animated React component featuring an autonomous robot vacuum that cleans your page by collecting dirt particles. Built with TypeScript, React and CSS

🎮 Live Demo

Try it on CodeSandbox

📦 Installation

npm install react-robot-vacuum

yarn add react-robot-vacuum

pnpm add react-robot-vacuum

🚀 Quick Start

import { RobotVacuum } from "react-robot-vacuum";

function App() {
  return <RobotVacuum />;
}

That's it! The robot will automatically start cleaning your page.

📖 API Reference

Props

Prop	Type	Default	Description
numberOfDirtBits	number	5	Number of dirt particles to spawn
autoStart	boolean	true	Whether cleaning starts automatically
minSpeed	number	0.5	Minimum movement speed in seconds
speedFactor	number	100	Factor for calculating speed based on distance
rotationDuration	number	0.6	Duration of rotation animation in seconds
onCleaningStart	() => void	undefined	Callback when cleaning starts
onCleaningComplete	() => void	undefined	Callback when robot returns to dock
onDirtCollected	(collected: number, total: number) => void	undefined	Callback fired each time dirt is collected

Ref Methods

Use a ref to control the robot imperatively:

import { useRef } from "react";
import { RobotVacuum, RobotVacuumRef } from "react-robot-vacuum";

function App() {
  const robotRef = useRef<RobotVacuumRef>(null);

  return (
    <>
      <RobotVacuum ref={robotRef} autoStart={false} />
      <button onClick={() => robotRef.current?.startCleaning()}>
        Start Cleaning
      </button>
      <button onClick={() => robotRef.current?.reset()}>
        Reset
      </button>
    </>
  );
}

Methods

• startCleaning() - Manually start the cleaning process
• reset() - Reset robot to dock and generate new dirt

🛠️ Development

# Install dependencies
npm install

# Run dev server
npm run vite:dev

# Build for production
npm run build

# Lint
npm run lint

📄 License

MIT © ZhanmuTW

🤝 Contributing

Contributions, issues, and feature requests are welcome!

⭐ Show your support

Give a ⭐️ if this project helped you!

---

Made with ❤️ and TypeScript