<stdin> |

My Thoughts, Trials and Adventures

'Know Your IP Address' with React

Posted at — Mar 21, 2020 | Last Modified on — May 11, 2023

Demo | Code

This is a quick primer on how to make a ‘Know Your IP’ page with React.

To follow through this, you will need to install node, and create a new project using create-react-app.This tutorial only deals with creating Know Your IP Address Component.


  1. public-ip module
  2. Working knowledge with React and ES6 Javascript.

Start by making a default skeleton component.

import React from 'react';
const publicIp = require('public-ip');


        return <div>
            <h1>Hello World!</h1>



export default MyIp;

Make sure this is working, when you visit the component, it should display “Hello World!”

Create a constructor for our class.

        this.state = {'ipv4': '', 'ok': false}

Here, I initiate a React state with 2 value pairs.

  • 'ipv4': '' - Placeholder that we update after retriving user’s ip.
  • 'ok': false - This will be set to True if user’s ip is sucessfully retrived.

These are some helper functions the retrieve and update IP in the state:

   async get_ip_user_ipv4(){
        let ip = await publicIp.v4();
        return ip

    async set_ip(){
        var curr_ip_ipv4;


            curr_ip_ipv4 = await this.get_ip_user_ipv4();
           }catch(err){ console.log(err); curr_ip_ipv4=undefined; }

        if (!(curr_ip_ipv4 === undefined)){
        this.setState({'ipv4': curr_ip_ipv4})
        this.setState({'ok': true})


set_ip() is the entry point. It will further call get_ip_user_ipv4() to get IP address of the user.It will then update ipv4 state with retrieved IP and set ok state to True


        return <div>
            {this.state.ok ? 
            <div className="alert alert-primary" role="alert">
                <h3>Your IP: {this.state.ipv4}</h3>
                </div>: null}
            <button className="btn btn-success" onClick={() => this.set_ip()}>Get IP!</button>


first, we check whether state.ok is set to True, This means we only want it to render if it is set to true or else return null. I used Bootstrap alert to make it look good, this is is optional.

in Button we use onClick prop to invoke our function that retrieves and displays user IP on screen.