hidden-from-bots-react
v1.0.0TypeScript
Say goodbye to bots looking for emails and phone numbers.
0/weekUpdated 3 years agoMITUnpacked: 27.8 KB
Published by Erik Giovani
npm install hidden-from-bots-react
Hidden From Bots
Say goodbye to bots looking for emails and phone numbers
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.
Installation
NPM
``
console
npm i hidden-from-bots-react
`
Yarn
console
yarn add hidden-from-bots-react
`
Usage
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.
`jsx
import "./App.css";
import { Email } from "hidden-from-bots-react";
function App() {
return
...
;}
export default App;
`
In this case, I import Email to hide an email.
`js`
import { Email } from "hidden-from-bots-react";
But you can also import Phone to hide a phone number.
`js`
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.
`jsx
import "./App.css";
import { Email, Phone } from "hidden-from-bots-react";
function App() {
return (
);
}
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.
`jsx
import "./App.css";
import styles from "./App.module.css";
import { Email, Phone } from "hidden-from-bots-react";
function App() {
return (
Phone Number
);
}
export default App;
`
Base64
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.
`jsx
import "./App.css";
import styles from "./App.module.css";
import { EmailBase64, PhoneBase64 } from "hidden-from-bots-react";
function App() {
return (
Phone Number
);
}
export default App;
``