USE RESULTS JS

Version: 1.0.0 Date: June 13, 2025

---

Description

This is a javascript npm package for retreiving data from api. This react hook abstracts fetch api implementaion.

Authors

@jadogeri

Repository

https://github.com/jadogeri/https://github.com/jadogeri/useResults-JS.git

Registory

https://www.npmjs.com/package/@josephadogeridev/use-results-js

Screenshots

Table of Contents

• 1. Introduction
  • 1.1 Purpose
  • 1.2 Scope
  • 1.3 Intended Audience

• 2. Technology Stack

• 3. Usage
• 3.0 Install Dependency
• 3. Initialization
• 3.1.0 Use Results Hook Call Arguments
• 3.1.1 Use Results Hook Return Array
• 3.1.2 Search API Function
• 3.2 Code Snippet

• 4. Tests
• 4.1 Test from node_modules
• 4.2 Test using npm link
• 4.3 Test using npm pack

• 5. License

• 6. References

1. Introduction

1.1 Purpose

This document outlines the package architecture, components, and design considerations for Fetching Data from an API. The goal is to create a reusable hook which abstracts Fetch API implementation.

1.2 Scope

This package will allow users to:

• Fetch data (GET) from an api.
• Allows headers to be set after initialization.
• Results utilize state management.

1.3 Intended Audience

• Junior or Senior developers.
• Beginners learning javascript.

---

2. Technology Stack

• Programming Languages: Javascript
• IDE: Visual Studio Code (VSCode)
• Test: Jest
• Plugins: Early AI
• Registory: NPM (Node Package Manager)
• Source Control: Git and GitHub
• CI/CD: GitHub Actions
• Code Analysis: SonarQube

---

3. Usage

3.0 Install Dependency

1 Type npm install @josephadogeridev/use-results-js to install dependencies.

  npm install @josephadogeridev/use-results-js

3.1 Initialization

3.1.0 useResults Hook Call Arguments

Name	Type	Description	Requirement
baseURL	String	The base url for a set of related URLs of the api.	Required
baseRoute	String	The initial route or path of the api.	Required
baseHeaders	String	The initial headers of the api.	Optional, defaults to {}

3.1.1 useResults Hook Return Array

Name	Type	Description	Requirement
searchApi	Function	calls the api with argurments.	Required, See SearchApi Function for usage .
results	Array	The data fetched from the api.	Required, display data retrieved
errorMessage	String	Display error returned from the api.	Required, debugging

searchApi, results, errorMessage

3.1.2 searchApi function

Name	Type	Description	Requirement
route	String	The path to a resource.	Required
params	Object	The params appended to query srting.	Optional, defaults to ""
headers	Object	Sets the headers of the api call .	Optional, defaults to {}

3.2 Code Snippet

import logo from './logo.svg';
import './App.css';
import useResultsJs from '@josephadogeridev/use-results-js';

function App() {

  const [searchApi, results, errorMessage] 
    = useResultsJs({baseURL:"http://localhost:5000",
                   baseRoute:"/", 
                   baseHeaders : null,
                   baseParams: null})
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={(()=>{ searchApi({route:"/objects/2", params:{id:1,t:2} } )})}>
          press
        </button>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          {JSON.stringify(results,null,4)}
        </p>      
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <div>
      </div>
    </div>
  );
}

export default App;

4. Tests

4.1 Test from node_modules

note : run test from node_modules after <a href="#3-usage"> Usage </a>

1 Navigate to cd @josephadogeridev/use-results-js directory using command below.

  cd node_modules/@josephadogeridev/use-results-js

2 Type npm run test to run unit tests.

  npm run test



4.2 Test using NPM Link

Note : this test was done pre publish to npm manager

1 In the root of package run npm link to create symbolic link between a local package under development and another Node.js project that wants to use it as a dependency.

  npm link



2 Create or use existing React Application.

3 Run command npm link @josephadogeridev/use-results-js to install created package.

  npm link @josephadogeridev/use-results-js



import logo from './logo.svg';
import './App.css';
import useResultsJs from '@josephadogeridev/use-results-js';

function App() {

  const [searchApi, results, errorMessage] 
    = useResultsJs({baseURL:"http://localhost:5000", baseRoute:"/"})
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={(()=>{ searchApi({route:"/objects/"} )})}>
          press
        </button>
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <p>
          {JSON.stringify(results,null,4)}
        </p>      
      </header>
      <div>
      </div>
    </div>
  );
}

export default App;

Example



4.3 Test using NPM Pack

Note : this test was done pre publish to npm manager

1 In the root of package run npm pack to package the module into a zipped file (.tgz).

  npm pack



2 Create or use existing React Application.

3 Copy and paste the created file in the root of a React Application.

4 Run command npm install josephadogeridev-use-results-js-1.0.0.tgz to install created package.

  npm install josephadogeridev-use-results-js-1.0.0.tgz



5. License

LICENSE

---

6. References

• FreeCodeCamp : Frontend Web Development: (HTML, CSS, JavaScript, TypeScript, React).
• AweSome Open Source : Awesome Readme Templates
• Readme.so : The easiest way to create a README
• Mockingoose : How to test mongoose models with jest and mockingoose
• NPM : Creating nodejs modules
• Dev.io : Testing npm packages before publishing
• FreeCodeCamp : How to create and publish an NPM Package - step by step guide
• Dev.io : Create and Publish NPM Package for custom Hooks in React JS