Project Name

Write a project description

Prerequisites

This project requires NodeJS (version 18 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
x.x.x
v18.x.x

Table of contents

• Project Name
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Serving the app
    • Running the tests
    • Building a distribution version
    • Serving the distribution version
  • API
    • useBasicFetch
      • Options
    • fetchData
  • Contributing
  • Credits
  • Built With
  • Versioning
  • Authors
  • License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Installation

BEFORE YOU INSTALL: please read the prerequisites

Start with cloning this repo on your local machine:

$ git clone https://github.com/ntohq/icks.git
$ cd icks

To install and set up the library, run:

$ npm install -S icks

Or if you prefer using Yarn:

$ yarn add icks

Usage

Serving the app

$ npm start

Running the tests

$ npm test

Building a distribution version

$ npm run build

This task will create a distribution version of the project inside your local dist/ folder

Serving the distribution version

$ npm run serve:dist

This will use lite-server for servign your already generated distribution version of the project.

Note this requires Building a distribution version first.

API

useBasicFetch

useBasicFetch(url: string = '', delay: number = 0)

Supported options and result fields for the useBasicFetch hook are listed below.

Options

url

| Type | Default value | | --- | --- | | string | '' |

If present, the request will be performed as soon as the component is mounted

Example:

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch('https://api.icndb.com/jokes/random');

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

delay

| Type | Default value | Description | | --- | --- | --- | | number | 0 | Time in milliseconds |

If present, the request will be delayed by the given amount of time

Example:

type Joke = {
  value: {
    id: number;
    joke: string;
  };
}

const MyComponent: React.FC = () => {
  const { data, error, loading } = useBasicFetch<Joke>('https://api.icndb.com/jokes/random', 2000);

  if (error) {
    return <p>Error</p>;
  }

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div className="App">
      <h2>Chuck Norris Joke of the day</h2>
      {data && data.value && <p>{data.value.joke}</p>}
    </div>
  );
};

fetchData

fetchData(url: string)

Perform an asynchronous http request against a given url

type Joke = {
  value: {
    id: number;
    joke: string;
  };
};

const ChuckNorrisJokes: React.FC = () => {
  const { data, fetchData, error, loading } = useBasicFetch<Joke>();
  const [jokeId, setJokeId] = useState(1);

  useEffect(() => {
    fetchData(`https://api.icndb.com/jokes/${jokeId}`);
  }, [jokeId, fetchData]);

  const handleNext = () => setJokeId(jokeId + 1);

  if (error) {
    return <p>Error</p>;
  }

  const jokeData = data && data.value;

  return (
    <div className="Comments">
      {loading && <p>Loading...</p>}
      {!loading && jokeData && (
        <div>
          <p>Joke ID: {jokeData.id}</p>
          <p>{jokeData.joke}</p>
        </div>
      )}
      {!loading && jokeData && !jokeData.joke && <p>{jokeData}</p>}
      <button disabled={loading} onClick={handleNext}>
        Next Joke
      </button>
    </div>
  );
};

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Credits

TODO: Write credits

Built With

• Typescript
• Rollup

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

• wesdevpro - Project Owner - wesdevpro

See also the list of contributors who participated in this project.

License

MIT License © ntohq (aka. ntohqdevelopers)