CODEWITHSUNDEEP
reactjspopup
Vinay Singh
Vinay Singh

Reputation: 483

Create a first visit popup in react application?

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>
    );
  }
 }

Upvotes: 7

Views: 12949

Answers (3)

Michriko
Michriko

Reputation: 337

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/

Upvotes: 8

Thananjaya S
Thananjaya S

Reputation: 1679

Yea, you can add pop-up as soon as you logged-in or landed-in your page.

In your component, add the following snippets

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'


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>
     );
   }
  }
}

componentWillMount() is a lifecycle hook, which will execute the set of statements before rendering your concern components.

And, go through all lifecycle components available for react.

Upvotes: 0

David
David

Reputation: 16277

Put some indicator in the Setting, e.g. AsyncStorage, then check if it is the 1st time running the app:

try {
  const value = await AsyncStorage.getItem('@isAppFirstTimeRunning');
  if (value !== 'true'){
    // not first time running
    ShowThePopUp();
  }
  else {
     AsyncStorage.setItem('@isAppFirstTimeRunning', 'true');
  }
} catch (error) {
  // Error retrieving data
}

Upvotes: 0

Related Questions