How to use the leaflet-geosearch.OpenStreetMapProvider function in leaflet-geosearch

}
        }
      }*/
    };
    drawControl = new L.Control.Draw(drawOptions);
    map.addControl(drawControl);

    // add osm basemap
    let openStreetMapMapnik = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });
    openStreetMapMapnik.addTo(map);

    // add search
    let provider = new OpenStreetMapProvider();

    let searchControl = new GeoSearchControl({
      provider: provider,
    });
    map.addControl(searchControl);

    map.on('click', e =&gt; {
      store.dispatch(unfocusMenu());
      if (self.drawingPoints) {
        store.dispatch(removeGeometry());
        store.dispatch(addGeometry(e.latlng, 'point'));

        // temporary - setting results for identify here since
        // i can't find a good way of getting it in to the identify
        // tool while using leaflet for mapping
        const latlng = [e.latlng.lng, e.latlng.lat];

function onload2 (initState) {
  // Measurement plugin
  if (L.control.polylineMeasure) {
    L.control.polylineMeasure({
    }).addTo(map);
  }

  // Add Geo Search
  var provider = new LeafletGeoSearch.OpenStreetMapProvider()
  var searchControl = new LeafletGeoSearch.GeoSearchControl({
    provider: provider,
    showMarker: false,
    retainZoomLevel: true
  })
  map.addControl(searchControl)

  // Geo location
  L.control.locate({
    keepCurrentZoomLevel: true,
    drawCircle: false,
    drawMarker: false,
    showPopup: false
  }).addTo(map)

  // Scale bar

position[1] = this.props.modalState.longitude

          let newCircle = circle( position,  {radius: this.props.modalState.distance});
          newCircle._createdTime = new Date();
          newCircle._type = 'geolocationModal';
          newCircle.addTo(map);
          setTimeout( () => { map.flyTo(position); map.fitBounds(newCircle.getBounds()) }, 200);
        }

        // save the react component so that the map's events can use the react state
        map.reactContext = this;

        // uncomment to zoom in on the user's location on startup
        //navigator.geolocation.getCurrentPosition( x => map.setView( [x.coords.latitude, x.coords.longitude], 13 ));

        const provider = new OpenStreetMapProvider();
        const searchControl = new GeoSearchControl({
          style: 'bar',
          provider: provider,
          showMarker: false,
          keepResult: true,
          autoClose: true
        });

        const getMapControlOptions = drawnItems => ({ draw: { polygon: false, marker: false, rectangle: false, square: false, circle: true, polyline: false, circlemarker: false }, edit: { featureGroup: drawnItems, edit: false, remove: false } });

        // tile configuration for the map
        tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

        var drawnItems = new featureGroup();
        map.addLayer(drawnItems);

(async () => {
  async function search(
    provider: BaseProvider,
    options = { query: 'Where is my home?' },
  ) {
    return provider.search(options);
  }

  [
    await search(new OpenStreetMapProvider()),
    await search(new BingProvider({ key: 'BING_API_KEY' })),
    await search(new EsriProvider()),
    await search(new GoogleProvider({ key: 'GOOGLE_MAPS_API_KEY ' })),
  ].forEach(([{ x, y, bounds, label, raw }]) => ({ x, y, bounds, label, raw }));
})();

(() => {
  const provider = new OpenStreetMapProvider();
  const map = new LeafletMap('map');

  function addAsControl() {
    const searchControl = new GeoSearchControl({ provider });
    map.addControl(searchControl);
  }

  function addToMap() {
    new GeoSearchControl({ provider, style: 'bar' }).addTo(map);
  }

  function autoComplete() {
    new GeoSearchControl({
      provider,
      autoComplete: true,
      autoCompleteDelay: 250,

import {
  OpenStreetMapProvider,
} from 'leaflet-geosearch';

const provider = new OpenStreetMapProvider();

const form = document.querySelector('form');
const input = form.querySelector('input[type="text"]');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  provider.search({ query: input.value }).then((results) => {
    console.log(results);
  });
});

constructor(props: Props) {
    super(props);

    this.state = {
      query: '',
      results: [],
      attributions: [],
    };

    this.searchProvider = new OpenStreetMapProvider({ params: searchParams(props) });
    this.timeoutId = null;

    this.handleTextInputChange = this.handleTextInputChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

constructor(private builder: FormBuilder) {
    this.provider = new OpenStreetMapProvider();
  }

import L from 'leaflet';
import {
  GeoSearchControl,
  OpenStreetMapProvider,
} from 'leaflet-geosearch';

const provider = new OpenStreetMapProvider();

const searchControl = new GeoSearchControl({
  provider: provider,
});

const map = new L.Map('map');
map.addControl(searchControl);