Textbox with Lazy loading using Fetch API in React

This Component can be used in any React app, consuming a queryable Rest API which sends response in the JSON format.

Demo

Installation and Usage Guide

Installation

npm i react-fetch-textbox

Usage Guide

This component is developed to work with Bootstrap v4 and can be used in the following way inside your application:

<FetchTextBox 
  url='https://www.thesportsdb.com/api/v1/json/1/searchplayers.php?p=' 
  method='GET' 
  jsonArrayKey='player' 
  fieldName="strPlayer" 
  sendData={getData.bind(this)} 
  />

• In the above snippet, url is the URL of the queryable Rest API which returns the data in the JSON format (must be a url that accepts querystrings as parameters as used in the example above, for instance, p in the above url). An example response can be similar to the following:

  {
    "player": [
      {
        "strNationality": "Denmark",
        "strPlayer": "Christian Rye",
        "strTeam": "AaB",
        "strSport": "Soccer"
      },
      {
        "strNationality": "Ghana",
        "strPlayer": "Christian Atsu",
        "strTeam": "Newcastle",
        "strSport": "Soccer"
      },
      {
        "strNationality": "Germany",
        "strPlayer": "Christian Lell",
        "strTeam": "_Retired Soccer",
        "strSport": "Soccer"
      }
    ]
  }

• method is the method of the request (for e.g. GET/POST),

• jsonArrayKey is the key of the JSON response array which you want to map with the textbox suggestions. player in the above example's case,

• fieldName is the key of JSON response's field you want to show as suggestions for the Textbox. strPlayer in the above example's case,

• sendData is the name of the function where you want to get the data from the textbox. Example implementation can be found in examples/src/index.js.

Example Usage

The complete implementation can be seen in examples/src/index.js.

Contributing

Please feel free to make improvements. All the feedback is greatly appreciated.