How to use the proj4 function in proj4

var   contour           = mapProperties && mapProperties.contour !== undefined ? mapProperties.contour : 'borda'
    var   color             = 'preto'
    let imageBounds         = mapProperties && mapProperties.currentCoordinates !== undefined ? mapProperties.currentCoordinates.bounds : null

    const regionStyle       = `plataforma:busca_regiao_${contour}_${color}`

    if (placeToCenter) {
        bounds = placeToCenter.geom.split(',')

        var west = parseInt(bounds[0])
        var east = parseInt(bounds[2])
        var south = parseInt(bounds[3])
        var north = parseInt(bounds[1])

        var prj1 = Proj4(firstProjection, secondProjection, [east, south])
        var prj2 = Proj4(firstProjection, secondProjection, [west, north])
        bounds = [[prj1[1], prj2[0]], [prj2[1], prj1[0]]]
    } else if (googleSearchCoord) {
        bounds = googleSearchCoord
    }

    var CQL_FILTER

    // This function gets the code to fill CQL filter
    const getCode = place => {
        var cd
        var operator = ' = '
        if (contour === 'opaco') {
            operator = ' <> '
        }
        switch (place.tipo) {
            case 'CRAAI':

private segmentDistToPoint(segA: ILocation, segB: ILocation, p: ILocation): [number, ILocation] {
    // potential 'catastrophic cancellation'
    const mSegA = proj4("EPSG:4326", "EPSG:3857", [segA.longitude, segA.latitude]);
    const mSegB = proj4("EPSG:4326", "EPSG:3857", [segB.longitude, segB.latitude]);
    const mP = proj4("EPSG:4326", "EPSG:3857", [p.longitude, p.latitude]);

    const sx1 = mSegA[0];
    const sx2 = mSegB[0];
    const px = mP[0];

    const sy1 = mSegA[1];
    const sy2 = mSegB[1];
    const py = mP[1];

    const px2 = sx2 - sx1;  // <-
    const py2 = sy2 - sy1;  // <-

    const norm = px2 * px2 + py2 * py2;

    let u;

private segmentDistToPoint(segA: ILocation, segB: ILocation, p: ILocation): [number, ILocation] {
    // potential 'catastrophic cancellation'
    const mSegA = proj4("EPSG:4326", "EPSG:3857", [segA.longitude, segA.latitude]);
    const mSegB = proj4("EPSG:4326", "EPSG:3857", [segB.longitude, segB.latitude]);
    const mP = proj4("EPSG:4326", "EPSG:3857", [p.longitude, p.latitude]);

    const sx1 = mSegA[0];
    const sx2 = mSegB[0];
    const px = mP[0];

    const sy1 = mSegA[1];
    const sy2 = mSegB[1];
    const py = mP[1];

    const px2 = sx2 - sx1;  // <-
    const py2 = sy2 - sy1;  // <-

    const norm = px2 * px2 + py2 * py2;

    let u;
    if (norm) {

export function WmOrGK4toWGS84(lng: string, lat: string): coord | undefined {
  const latInt = parseInt(lat, 10);
  const lngInt = parseInt(lng, 10);

  if (latInt === 0 && lngInt === 0) {
    return undefined;
  }

  if (isNaN(latInt) || isNaN(lngInt)) {
    return undefined;
  }

  if (lngInt < 2500000) {
    return proj4("WM", "WGS84", [lngInt, latInt]);
  } else {
    return proj4("GK4", "WGS84", [lngInt, latInt]);
  }
}

reproject(tileData, tilePieceBoundingBox) {
    var y = 0;
    var x = 0;
    var height = this.height;
    var width = this.width;
    var proj4To = proj4(this.projectionTo);
    var proj4From;
    if (this.projectionFrom) {
      try {
        proj4From = proj4(this.projectionFrom);
      }
      catch (e) { }
    }
    if (!proj4From && this.projectionFromDefinition) {
      proj4From = proj4(this.projectionFromDefinition);
    }
    var conversion;
    try {
      conversion = proj4(this.projectionTo, this.projectionFrom);
    }
    catch (e) { }
    if (!conversion) {
      conversion = proj4(this.projectionTo, this.projectionFromDefinition);
    }
    var latitude;
    var rows = [];
    for (var i = 0; i < height; i++) {
      rows.push(i);
    }
    var columns = [];
    for (var i = 0; i < width; i++) {

reproject(tileData, tilePieceBoundingBox) {
    var y = 0;
    var x = 0;
    var height = this.height;
    var width = this.width;
    var proj4To = proj4(this.projectionTo);
    var proj4From;
    if (this.projectionFrom) {
      try {
        proj4From = proj4(this.projectionFrom);
      }
      catch (e) { }
    }
    if (!proj4From && this.projectionFromDefinition) {
      proj4From = proj4(this.projectionFromDefinition);
    }
    var conversion;
    try {
      conversion = proj4(this.projectionTo, this.projectionFrom);
    }
    catch (e) { }
    if (!conversion) {
      conversion = proj4(this.projectionTo, this.projectionFromDefinition);
    }
    var latitude;
    var rows = [];

handleSubmit = () => {
    const { east, north, zone, hemisphere } = this.state;
    const { setMapSettings } = this.props;
    const utm = `+proj=utm +zone=${zone} +${hemisphere}`;
    const wgs84 = '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs';
    let latlng = [];
    try {
      latlng = proj4(utm, wgs84, [parseInt(east, 10), parseInt(north, 10)]);
    } catch (error) {
      this.setState({ error: true });
    }
    if (validateLatLng(latlng[1], latlng[0])) {
      setMapSettings({ center: { lat: latlng[1], lng: latlng[0] } });
    } else {
      this.setState({ error: true });
    }
  };

const l1 = p1.distanceTo( p2 );

		const transform = proj4( displayCRS, survey.sourceCRS );

		p1.copy( transform.forward( p1 ) );
		p2.copy( transform.forward( p2 ) );

		self.projection = transform;

		const l2 = p1.distanceTo( p2 );

		self.scaleFactor = l1 / l2;
		StationPosition.scaleFactor = 1 / self.scaleFactor;

		self.projectionWGS84 = proj4( 'WGS84', survey.displayCRS );

	}

let newCoords = coords.map(coord =>
            proj4js(proj, appStrings.PROJECTIONS.latlon.code, coord)
        );

export function WGS84ToUTM(longitude, latitude) {
    const UTM_TARGET = UTM_TARGET_TEMPLATE(STORE.hmi.utmZoneId);
    return Proj4(WGS84_TEXT, UTM_TARGET, [longitude, latitude]);
}