Say goodbye to bots looking for emails and phone numbers.

Related tags

Miscellaneous hidden-from-bots-react
Overview
#

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

npm i hidden-from-bots-react

Yarn

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.

...
; } export default App;"> 
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.

Email Phone Number
); } export default App;"> 
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.

Email Phone Number
); } export default App;"> 
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;

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.

Email Phone Number
); } export default App;"> 
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;
You might also like...
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

🧪 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript 🚀 Como executar Clone o projeto e acesse a pasta

Felipe Souza 3 Aug 27, 2021
Compares Discord libraries and their support of new API features. Made with React, Next.js, and Bulma.

Compares Discord libraries and their support of new API features. Made with React, Next.js, and Bulma.

Advaith 109 Dec 31, 2022
⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere
⚛️ Deliver UI for Web and Mobile platforms without taking care about complexity on how to style there, learn React once and code everywhere

SkynexUI Use the platform, don't care about how to style there ⚠️ Version 1.x.x is alpha, trust only in v2 A set of components writen on top of React

SkynexUI 671 Dec 31, 2022
In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.
In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

In this assignment you will start with a basic calculator and style it using CSS, inline styles, and styled-components.

Brandon Cloutier 0 Oct 12, 2022
JavaScript and TypeScript finite state machines and statecharts for the modern web.
JavaScript and TypeScript finite state machines and statecharts for the modern web.

JavaScript state machines and statecharts JavaScript and TypeScript finite state machines and statecharts for the modern web. 📖 Read the documentatio

Stately 22.3k Jan 9, 2023
PixelsMetaverse, Truffle and react and web3js team up to develop a metaverse game

English Pixels Metaverse Pixels Metaverse Introduction： Pixel Metaverse was born during the competition of the first Metaverse Training Camp held

null 46 Dec 12, 2022
This is used for minting NFTs and getting metadata , token owner, wallet address assigned to an NFT, just check it out and enjoy

nft-minter A Heroku web server to easily mint non-fungible tokens via an API Example Configuration: Blockchain: Ethereum Testnet: Rinkeby Contract: ER

John Oseni 9 Aug 24, 2022
Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.
Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor 👾 All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: 📺 Instagram Je

null 1 Nov 26, 2021
Aline is a mobile application available on iOS and Android. Made with love and React-native.

Aline ! Aline est une application mobile Android et iOS qui vous aide dans la gestion de vos produits consignés : Trouvez les magasins qui proposent d

Laetitia Langlois 4 Feb 1, 2022
Releases(1.0.0)
Owner
Erik Giovani
Erik Giovani
GitHub https://hiddenfrombots.js.org/
whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

JstnLT 21 Dec 30, 2022
A React Library to update API url with query parameters by looking at query parameters in the browser.

A React Library to update API url with query parameters by looking at query parameters in the browser.

Casey Bui 17 Dec 29, 2022
React component to format numbers in an input or as a text.

react-number-format React component to format number in an input or as a text Features Prefix, suffix and thousand separator. Custom format pattern. M

Sudhanshu Yadav 3.4k Jan 6, 2023
Number pairing functions with support for BigInt numbers.

Pairing Number pairing functions with support for BigInt numbers. Features Simple API; Works with plain numbers or BigInt; Extensive tests; Typescript

Causaly 2 Mar 16, 2022
Responsive and customizable search and select for Giphy's GIFs and Stickers.

Responsive and customizable search and select for Giphy's GIFs. https://sergiop.github.io/react-giphy-searchbox/ React Giphy Searchbox is a powerful r

Sergio Pedercini 46 Sep 4, 2022
A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ken Tandrian 2 Nov 1, 2022
HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.

React Document Meta HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API. Built wi

kodyl 320 Nov 18, 2022
A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.

The Sword Breaker 315 Dec 30, 2022
An interactive CLI automation tool 🛠️ for creating react.js and next.js projects most fast and efficiently. ⚛️

An interactive CLI automation tool ??️ for creating react.js and next.js projects most fast and efficiently. ⚛️

Alexis Guzman 27 Apr 12, 2022
Open source authentication and authorization service, container-native, PassportJS-native, built with React and Node.

id6 Authentication and authorization as a service Docs - Twitter Why id6 ? I wrote id6 out of frustration of re-writing authentication and authorizati

id6 12 Oct 31, 2021