Hookpedia

Hookpedia is an open-source React Hooks directory website, built with Next.js and Chakra UI, that lets developers browse, search, and share reusable React Hooks. It aggregates community-submitted hook code and documentation into a searchable web interface aimed at Brazilian developers.

What is Hookpedia?

Hookpedia is a community-driven website and open-source repository of React Hooks, created by Guilherme da Silva Sousa and available at hookpedia.now.sh. It takes hook submissions as pull requests and correction reports as issues, then renders each hook's code and Markdown documentation as a browsable page. The platform runs on Next.js with Chakra UI components, and many original hooks were sourced from the useHooks repository, which is released under the Unlicense.

Key Features

• Keyboard search for hooks — Press Ctrl/Cmd + K to open a search box that filters available React Hooks by name.
• TypeScript/JavaScript toggle — A "Veja em TypeScript/JavaScript" button switches the displayed code between typed and untyped versions of the same hook.
• Twitter sharing — Hook code pages include a link that lets you share the code snippet directly via Twitter.
• Next.js framework — Built on Next.js for server-rendered pages and a React-based component model.
• Chakra UI styling — Uses the Chakra UI component library for accessible, themeable interface elements.
• Markdown documentation — Hook descriptions are written in Markdown and rendered with React Markdown plus the Remark GFM plugin for GitHub-Flavored Markdown syntax.
• Syntax highlighting — Code samples are displayed with React Syntax Highlighter for lexical emphasis.
• HTTP and code quality tools — Uses Axios for HTTP requests, and the codebase is linted with ESLint and formatted with Prettier.

Who is it for?

• React developers — looking for ready-to-use hooks they can copy and adapt into their own projects without reinventing common patterns.
• Brazilian developer community — the site's interface, documentation, and contribution guidelines are written in Portuguese, making it especially accessible to Portuguese-speaking developers.
• Open-source contributors — developers who want to share their own hooks by opening a pull request or who want to fix or improve existing hooks by opening an issue.

What can you do with Hookpedia?

• Browse a curated hook collection: explore a growing list of React Hooks, several of which originated from the popular useHooks repository.
• Search instantly: use the Ctrl/Cmd + K shortcut to jump to a specific hook without scrolling through the list.
• Compare typed vs untyped code: flip between JavaScript and TypeScript versions of the same hook to match your project's setup.
• Share hook links: send a hook's code page to teammates or post it on Twitter from the share button.

How does Hookpedia work?

Community members contribute hook code and documentation through the standard GitHub workflow: fork the repository, create a branch, commit changes, and open a pull request. The project maintainers review submissions, then the website renders the accepted Markdown content and syntax-highlighted code for each hook. Contributors can also open an issue with the hook name, code, and behavior description if they prefer not to submit a pull request.

FAQ

Is Hookpedia free?

Yes, Hookpedia is distributed under the MIT license, and the website is publicly accessible. Hooks borrowed from the useHooks repository are under the Unlicense, so the code can be freely reused and modified.

Is Hookpedia only for Brazilian developers?

The content is written in Portuguese and targets the Brazilian community, but the code itself is language-agnostic and usable by any React developer. Contributions are welcomed from developers anywhere.

How can I contribute a new hook?

Fork the repository, create a branch for your feature, use git add and git commit to stage your changes, push the branch, and open a pull request. Alternatively, open an issue containing the hook name, your code, and a description of how it works.

What features are planned for Hookpedia?

The project roadmap lists three planned additions: a favorites counter for hooks, a comments section on hook pages, and a dedicated page with contribution instructions.

What is the repository license?

The project uses the MIT license, as stated in the README's License section. This means you can freely use, copy, modify, and distribute the code with attribution.