VPN Detector

This project is a simple React application that detects if a user is using a VPN and displays relevant information such as IP address, continent, country, ISP, and currency.

Table of Contents

• Components
• Dependencies
• License

Components

App Component

This is the main component of the application. It uses the VpnCheck function to fetch VPN-related data and displays it.

import VpnCheck from "mb64-vpn-detect";
import { useState, useEffect } from "react";
import Work from './Work';

export default function App() {
  const [fullData, setFullData] = useState();

  useEffect(() => {
    async function CallThis() {
      // Replace 'your_api_key_here' with your actual API key
      const data = await VpnCheck("your_api_key_here");
      if (data) {
        setFullData(data);
      }
    }
    CallThis();
  }, []);

  return (
    <div className="App">
      <h1>VPN Detector</h1>
      <div className="screen">
        <div className="main">
          {fullData && (
            <div>
              <h2>Full Data</h2>
              <div>
                <h3>IP: {fullData?.data?.ip}</h3>
                <h3>Continent: {fullData?.data?.continent}</h3>
                <h3>Country: {fullData.data.country}</h3>
                <h3>ISP: {fullData?.data?.isp}</h3>
                <h3>Currency: {fullData?.data?.currency}</h3>
              </div>
            </div>
          )}
        </div>
        <Work Vpn={fullData?.status} />
      </div>
    </div>
  );
}

Work Component

This component displays a message indicating whether the user is using a VPN.

import "./work.css";

export default function Work({ Vpn }) {
  if (Vpn) {
    return (
      <div className="main">
        <h1>You are on VPN</h1>
        <h3>Please Turn off</h3>
      </div>
    );
  }

  return (
    <div className="main">
      <h1>You Are Not using VPN</h1>
    </div>
  );
}

Dependencies

• react: A JavaScript library for building user interfaces.
• mb64-vpn-detect: A library to check if a user is using a VPN.

To install the dependencies, run:

npm install react mb64-vpn-detect

API Key

To use this application, you need to API key. Demo Api Key "demokey123".

Replace 'your_api_key_here' in the App component with your actual API key.

License

This project is licensed under the MIT License.