'Know Your IP Address' with React
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.
Prerequisites
Start by making a default skeleton component.
import React from 'react';
const publicIp = require('public-ip');
render(){
return <div>
<h1>Hello World!</h1>
</div>
}
}
export default MyIp;
Make sure this is working, when you visit the component, it should display “Hello World!”
Create a constructor for our class.
constructor(props){
super(props)
this.state = {'ipv4': '0.0.0.0', 'ok': false}
}
Here, I initiate a React state with 2 value pairs.
'ipv4': '0.0.0.0'- Placeholder that we update after retriving user’s ip.'ok': false- This will be set toTrueif 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;
try{
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})
}
console.log(this.state.ipv4);
}
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
render(){
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>
</div>
}
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.