react-fetch-textbox

    1.0.4 • Public • Published

    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.

    Install

    npm i react-fetch-textbox

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    20.3 kB

    Total Files

    6

    Last publish

    Collaborators

    • razashoaib