Create a first visit popup in react application?

Question

How do I make a first visit popup for my react application? Is it possible to implement using the react-popup module? I used this module below but it does not seem to work. Can you check and let me know what wrong here.

Below is my homepage:

import React, {Component} from 'react';
import './HomePage.css';
import Carousel from 'nuka-carousel';
import HeaderComponent from '../../components/Header/Header.js';
import {Decorators} from './decorators.js';
import Popup from 'react-popup'


export default class HomePage extends Component {
    redirectPage = () => {
    window.location = '#/dashboard';
}

componentWillMount(){
  Popup.alert('my component')
}

render() {
    var mixins = [Carousel.ControllerMixin];
    return (
        <div>
            <div className='explore-button-container'>
                <button id='exploreBtn' onClick={this.redirectPage}>Explore</button>
            </div>

            <HeaderComponent id='header' location={this.props.location}/>
            <Carousel
                autoplay={true}
                autoplayInterval={3000}
                wrapAround={true}>
                //Carousel Content
            </Carousel>
        </div>
    );
  }
 }

Answer 1

In componentDidMount you cann Access the localstorage and the sessionStorage, where you can set a flag, if this is the first visit. something like this:

class myComponent(){
    constructor(){//do stuff here}
    componentDidMount(){
        let visited = localStorage["alreadyVisited"];
        if(visited) {
             this.setState({ viewPopup: false })
             //do not view Popup
        } else {
             //this is the first time
             localStorage["alreadyVisited"] = true;
             this.setState({ viewPopup: true});
        }
    render() {
        return(<Modal
                aria-labelledby='modal-label'
                autoFocus={false}
                style={modalStyle}
                backdropStyle={backdropStyle}
                show={this.state.viewPopup}
                onHide={this.close}>
                  <div style={dialogStyle()} >
                    I'm the Popup Text
                  </div>
                </Modal>);
     }
}

This is how i solved it with Modal, but I'm sure you can do it with Popup, too. If you want to view the Popup on every first visit of a session you can use the sessionStorage instead of the localstorage. Keep in mind that you have to set the styles. You can see an example here: https://react-bootstrap.github.io/react-overlays/