use-basic-fetch
v0.2.0
Published
> Very simple and basic but effective fetch hook
Downloads
2
Maintainers
Readme
useBasicFetch
Very simple and basic but effective fetch hook
Demo
Installation
Install the package with npm
$ npm i -S use-basic-fetch
Or Yarn
$ yarn add use-basic-fetch
Usage
A simple usage for use-basic-fetch
to load some data when your component is rendered
import { useBasicFetch } from 'use-basic-fetch';
type Joke = {
value: {
id: number;
joke: string;
};
};
const MyComponent: React.FC = () => {
const { data, error, loading } = useBasicFetch<Joke>('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>
);
};
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Add your changes:
git add .
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :sunglasses:
License
MIT License © Andrea SonnY