Inspiration

Bots are a real problem, and many of them spam click. So, I wanted to make a simple way to block those bots that spam click.

What it does

Just install the react library with npm i @bit/bot.click-detect.click-detect and then import it with import ClickDetect from '@bit/bot.click-detect.click-detect';. Then, surround all the html/jsx that you want to protect from bots with <ClickDetector> tags.

You are able to customize the frame, clicks, and header props, which default to 1000, 5, and <h1>The site has detected that you are a bot. If you are not, then reload the page</h1> respectively.

Essentially, if the component detects that you clicked on it clicks times within frame milliseconds, it displays the header.

How I built it

I used plain React to build it, and then used bit.dev to deploy it as a package.

Challenges I ran into

For some reason, there were a ton of errors in compilation when deploying it to bit.dev. After 4 hours of troubleshooting, I realized the answer was to precompile all the React code to a very old version and then deploy that code to the package manager, rather than relying on Bit.dev's compiler which caused a ton of issues.

Accomplishments that I'm proud of

It's the first library that I published to a package manager!

What I learned

I learned how to publish packages to package managers.

What's next for Click Detect

I want to add more custom components against bot detection in the same collection.

Built With

  • package-manager
  • react.js
Share this project:

Updates