🤖 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