raathigesh / hooks.guide

🏗 Collection of React hooks curated by the community

• 🍎 Handpicked hooks to learn from or copy/paste or experiment
• 💡 All code snippets are interactive
• 🎈 Copy snippets to clipboard with a click
• 💄 Prettify the snippets

🏗 How do I add a new Hook?

The hooks are documented using markdown in public/docs directory.

To add a new hook,

• Add a new markdown file under a folder.
  • Document the hook under community folder if the hook doesn't belong to a published npm module.

    Refer public/docs/template.md for documentation guide

• Make a pull request

🧡 Contribute

• Run yarn install
• Run yarn start to start the app in dev mode
• If you add a new markdown file, you have to go to src/docs.js file and just make a dummy change to trigger a webpack build. This runs the babel macro again.

👩‍🎨 Contributors

Thanks goes to these wonderful people (emoji key):

Raathigeshan Kugarajan 💻 🎨 💡 📖	Vivek Nayyar 💻 💡 📖	Piotr Pietrzak 📖	Ivan Mironchik 💡

This project follows the all-contributors specification. Contributions of any kind welcome!

hooks.guide's Issues

open-graph in head?

It would be nice to add open graph tags in https://www.hooks.guide/ page!
👍

Thank you for great project!

Add additional built-in hooks

Very impressed with this project - so elegant!

I'm just wondering if it was a conscious decision to leave out some of the other built-in hooks, here's what it says in the docs:

The following Hooks are either variants of the basic ones from the previous section, or only needed for specific edge cases. Don’t stress about learning them up front.

I'd be happy to add examples if it pleases the authors.

• useContext
• useCallback
• useMemo
• useRef
• useImperativeMethods
• useMutationEffect
• useLayoutEffect

[WebSite] Uncorrect canonical URL

The canonical URL of the site is not correct:

  <link rel="canonical" href="https://hooks.guide" />

I'm using Hypothes.is to bookmark links, and the service relies on the canonical URL of the bookmarked site as a main resource URI.

So, I've bookmarked https://hooks-guide.netlify.app but the service considers I've bookmarked https://hooks.guide instead.

Search?

It would be nice to use this centralised place to be able to search across all docs of the hooks.

We can add DocSearch (like on the react docs) on this page. What do you think?

Some routes lead to wrong hooks

Feature usehooks.com

I recently discovered usehooks.com and think they have quite useful examples 🙂

Adding a single hook

Hi, i want to include this hook i made to your page: react-use-session. I see i have to create a new folder under public but it looks like all those hooks there are part of some set of hooks, so the folder name is the set name. In my case i only have a single hook. So, what name should i give to the folder? My Github username or just the hook name?