JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js"></script>
<div id='map'></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiY2FsZW5kcmUiLCJhIjoiOFFtdjVkYyJ9.o5HtQCVfuOeDTxFWe884zA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
    center: [-74.50, 40], // starting position
    zoom: 9 // starting zoom
});

function toPolygon(bounds) {
  if (!bounds instanceof mapboxgl.LngLatBounds) {
    throw new TypeError('Expecting bounds to be mapboxgl.LngLatBounds, got ' + bounds);
  }
  var canvas = map.getCanvas(),
  w = canvas.width,
  h = canvas.height,
  cUL = map.unproject ([0,0]).toArray(),
  cUR = map.unproject ([w,0]).toArray(),
  cLR = map.unproject ([w,h]).toArray(),
  cLL = map.unproject ([0,h]).toArray();
  var coordinates = [cUL,cUR,cLR,cLL,cUL];
  return turf.polygon([coordinates]);
};

var index = 0;
map.on('rotateend', function(e) {
	 var viewPolygon = toPolygon(map.getBounds());
   var sid = 'view-' + index;
   index++;
   map.addSource(sid, {
   	type: 'geojson',
    data: viewPolygon
   });
   
   map.addLayer({
   	source: sid,
    id: sid + '-layer',
    type: 'fill',
    layout: {
      visibility: 'visible'
    },
    paint: {
    	'fill-color': 'black',
      'fill-opacity': 0.25,
      'fill-outline-color': 'black'
    }
   });
	 console.log(map, JSON.stringify(viewPolygon));
})