Skip to content

razashoaib/react-fetch-textbox

Repository files navigation

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

DemoGif

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.