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