Hidden From Bots
Normally on the internet there are bots, crawlers or spiders, they are all the same with a different name and are dedicated to searching the internet for data such as emails, phone numbers and other data, although not all of them are bad like of google that is in charge to analyze your site to be able to index it in their search engine, there are others that are, although you can create a robots.txt file and add a configuration to avoid bots, some people can create bots to ignore if there is a robots file .txt and they can scan still your site and collect your email or phone number to be able to send spam, make phone scams or sell that data to companies so they can send you unwanted advertising.
Luckily with Hidden From Bots you can avoid most of these annoying bots by hiding these elements from the dom.
Using Hidden From Bots with React is very easy, you can do it with create-react-app or with Vite, only need to install hidden-from-bots-react in your project with your favorite package manager and import it in your project.
import "./App.css";
import { Email } from "hidden-from-bots-react";
function App() {
return <div className="App">...</div>;
}
export default App;In this case, I import Email to hide an email.
import { Email } from "hidden-from-bots-react";But you can also import Phone to hide a phone number.
import { Phone } from "hidden-from-bots-react";To hide an email you need to pass the email prop to the Email component and to hide a phone number you have to pass the phone prop to the Phone component.
import "./App.css";
import { Email, Phone } from "hidden-from-bots-react";
function App() {
return (
<div className="App">
<Email email="[email protected]">Email</Email>
<Phone phone="57123456789">Phone Number</Phone>
</div>
);
}
export default App;You can also use css , css modules, sass, sass modules or style to style them to your liking, and you can switch the content between the Phone or Email tags to add custom text or an icon.
import "./App.css";
import styles from "./App.module.css";
import { Email, Phone } from "hidden-from-bots-react";
function App() {
return (
<div className="App">
<Email className={styles.email} email="[email protected]">
Email
</Email>
<Phone style={{ color: "red" }} phone="57123456789">
Phone Number
</Phone>
</div>
);
}
export default App;To hide an email or phone number from more advanced bots you can import EmailBase64 for an email or PhoneBase64 for a phone number, the steps to use them are the same as the previous examples with just one extra step, in the email and phone prop we have to pass the email or the phone number in Base64, you can use the following link https://hiddenfrombots.js.org/encoder so you can transform them to Base64 or you can use the page you like to transform them to Base64.
import "./App.css";
import styles from "./App.module.css";
import { EmailBase64, PhoneBase64 } from "hidden-from-bots-react";
function App() {
return (
<div className="App">
<EmailBase64 className={styles.email} email="aGVsbG9Ad29ybGQuY29t">
Email
</EmailBase64>
<PhoneBase64 style={{ color: "red" }} phone="NTcxMjM0NTY3ODk=">
Phone Number
</PhoneBase64>
</div>
);
}
export default App;Made with ❤️ by Erik Giovani