react-fetch-textbox v1.0.4
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 inexamples/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.