arnaud-zg/popup-sensor

Popup window sensor written in Typescript

Welcome to popup-sensor 👋

Popup window sensor written in typescript

Installing

Using npm:

npm i --save popup-sensor

Using yarn:

yarn add --dev popup-sensor

Usage

Here are examples of how you can use popup-sensor.

Simply open a popup window

import Popup from 'popup-sensor'

const onClick = () => {
  const popupInstance = new Popup({})

  popupInstance.open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

One-liner

import Popup from 'popup-sensor'

const onClick = () => {
  new Popup({}).open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

Catch the close event of popup window

import Popup from 'popup-sensor'

const onPopupClose = () => {
  console.log('popup close event')
}

const onClick = () => {
  const popupInstance = new Popup({ onClose: onPopupClose })

  popupInstance.open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

One-liner

import Popup from 'popup-sensor'

const onPopupClose = () => {
  console.log('popup close event')
}

const onClick = () => {
  new Popup({ onClose: onPopupClose }).open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

Track location and dispatch action

import * as queryString from 'query-string'
import Popup from 'popup-sensor'
import { EPopupAction } from 'popup-sensor/types'

const onLocationChange = (location: Location) => {
  const locationSearch = queryString.parse(location.search)

  return locationSearch.code ? EPopupAction.CLOSE : EPopupAction.NONE
}

const onClick = () => {
  const popupInstance = new Popup({ onLocationChange })

  popupInstance.open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

One-liner

import * as queryString from 'query-string'
import Popup from 'popup-sensor'
import { EPopupAction } from 'popup-sensor/types'

const onLocationChange = (location: Location) => {
  return queryString.parse(location.search).code
    ? EPopupAction.CLOSE
    : EPopupAction.NONE
}

const onClick = () => {
  new Popup({ onLocationChange }).open({
    title: 'Google',
    url: 'https://www.google.com/',
  })
}

Running the tests

Tests are written with jest

Unit tests

Using jest:

yarn run test

Deployment

Deployment is done with Travis.

Built With

• TSDX - TSDX

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• Arnaud Zheng - Initial work - arnaud-zg

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details