awesome-react-custom-hooks
An awesome list of useful react custom hooks.
Install
npm install --save awesome-react-custom-hooks
Usage
useFetch
import React from "react";
import { useFetch } from "awesome-react-custom-hooks";
const App = () => {
const [res, error, isLoading] = useFetch(
"https://api.github.com/users/lcnogueira"
);
if (error) {
return <div>Error</div>;
}
return (
<>
<h1>useFetch Example</h1>
{isLoading ? <div>Loading...</div> : JSON.stringify(res)}
</>
);
};
useLocalStorageState
import React from "react";
import { useLocalStorageState } from "awesome-react-custom-hooks";
function App() {
const [counter, setCounter] = useLocalStorageState("counter", 0);
return (
<>
<h1>useLocalStorageState Example</h1>
<div>{counter}</div>
<button
onClick={() => {
setCounter(counter + 1);
}}
>
Add counter
</button>
</>
);
}
useMousePosition
import React from "react";
import { useMousePosition } from "awesome-react-custom-hooks";
function App() {
const position = useMousePosition();
return (
<>
<h1>useMousePosition Example</h1>
{position.x}:{position.y}
</>
);
}
useDataApi
import React, { useState } from "react";
import { useDataApi } from "awesome-react-custom-hooks";
function App() {
const [query, setQuery] = useState("redux");
const [{ data, isLoading, isError }, doFetch] = useDataApi(
`https://hn.algolia.com/api/v1/search?query=${query}`,
{
hits: []
}
);
return (
<>
<h1>useDataApi Example</h1>
<form
onSubmit={event => {
doFetch(`http://hn.algolia.com/api/v1/search?query=${query}`);
event.preventDefault();
}}
>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
{isError && <div>Something went wrong ...</div>}
{isLoading ? (
<div>Loading ...</div>
) : (
<ul>
{data.hits.map(item => (
<li key={item.objectID}>
<a href={item.url}>{item.title}</a>
</li>
))}
</ul>
)}
</>
);
}
Contributing
Please read CONTRIBUTING.md for details on the process for submitting pull requests to us.
License
MIT © lcnogueira
This library was bootstraped with create-react-hook.