My personal custom hooks and a compilation of comunity custom hooks
This project requires NodeJS (version 14.16.1 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
7.19.1
v14.16.1
- [Babel Custom Hooks](#Babel Custom Hooks)
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.
BEFORE YOU INSTALL: please read the prerequisites
Start with cloning this repo on your local machine:
$ git clone https://github.com/Sstark97/handy-react-hooks
$ cd PROJECT
To install and set up the library, run:
$ npm install -S myLib
Or if you prefer using Yarn:
$ yarn add --dev myLib
useFetch(url: string = '', config: object)
url
Type | Default value |
---|---|
string | '' |
If present, the request will be performed as soon as the component is mounted
Example:
const FetchComponent = () => {
const { data, error, loading } = useFetch(
"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>
);
};
config
Type | Default value | Description |
---|---|---|
Object | null | Fecth optional Config |
If present, the request will be use the optional config
Example:
const FetachComponent = () => {
const { data, error, loading } = useFetch(
"https://api.icndb.com/jokes/random",
{
method: "POST",
body: {
name: "I'm POST",
},
}
);
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>
);
};
useNearScreen();
You can use these hook to know if an html element is inside the viewport, and the hook returns a in the show variable true if the element is inside the viewport and a reference to it.
useLocalStorage(key: string = '', initialValue: any)
key
Type | Default value |
---|---|
string | '' |
initialValue
Type | Default value | Description |
---|---|---|
any | null | initialValue to save |
Example:
const LocalStorageComponent = () => {
const { storedValue, error, setLocalStorage } = useLocalStorage("test", "These is a test");
if (error) {
return <p>Error</p>;
}
return (
<div className="App">
<h2>Chuck Norris Joke of the day</h2>
{storedValue}</p>}
</div>
);
};
useSessionStorage(key: string = '', initialValue: any)
key
Type | Default value |
---|---|
string | '' |
initialValue
Type | Default value | Description |
---|---|---|
any | null | initialValue to save |
Example:
const SessionStorageComponent = () => {
const { storedValue, error, setSessionStorage } = useSessionStorage("test", "These is a test");
if (error) {
return <p>Error</p>;
}
return (
<div className="App">
<h2>Chuck Norris Joke of the day</h2>
{storedValue}</p>}
</div>
);
};
- 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 😎
- Aitor Santana - Initial work - Aitor Santana
MIT