Lessons

Capture an IP using React - Perfect for Sign In, Stripe Terms of Service, etc.

Capturing an IP is fairly simple, and can be done with React. In this tutorial, I'll show you the little bit of code needed. You must have Node installed. We will use this code base as a starting point. Download or clone it, then run the following commands:

1
2
npm install
npm run start

The app will start up on http://localhost:3000. Open the src/App.js. You can change it to be:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  componentWillMount() {
    fetch('https://api.ipify.org?format=jsonp?callback=?', {
      method: 'GET',
      headers: {},
    })
    .then(res => {
      return res.text()
    }).then(ip => {
      console.log('ip', ip);
    });
  }

  render() {
    return (
      div className="App">
        div className="App-header">
          img src={logo} className="App-logo" alt="logo" />
          h2>Welcome to React/h2>
        /div>
        p className="App-intro">
          To get started, edit code>src/App.js/code> and save to reload.
        /p>
      /div>
    );
  }
}

export default App;

As you can see this will call the IPify API. It will return your IP. This IP will be excellent for Term of Services and Analytics.