Introduction to React

Upgrades

• Base64 to hide emails and phone numbers from more advanced bots

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.

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="hello@world.com">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="hello@world.com">
        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.

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;