A curated list of custom react hooks that will benefit people in their daily tasks related to development in react

by React

useReactHooks

A repository for custom React Hooks.

What is useReactHooks

useReactHooks is a curated list of custom react hooks that will benefit people in their daily tasks related to development in react.

Pre-Requisites

Git and Github

Here are some instructions on how to setup git.

React (Typescript)

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. It allows you to create single page applications which can change state without having to reload the page.

What are React hooks?

Hooks are functions that let you “hook into” React state and lifecycle features from function components. They let you use state and other React features without writing a class. Any function that starts with the keyword use is considered to be a hook in react. Here's very good article by FreeCodeCamp on react hooks.

Why Typescript?

Typescript has gained immense popularity over the past few years, mainly because of improved code consistency, less proneness to errors and future browser support. Since the motive of the repostiry is to create hooks or in simple terms functional components, we needed type checking for better readability and understanding of the functions and props. Additionally it also provides better support for JSX and incredible intellisense in modern text editors.

You can learn about React and React Typescript from here.

How to contribute

We're open to any kind of contribution, just follow the guidelines and you're good to go!

Issues

  • Submit a new issue
  • Comment on an issue to get assigned

Code Contribution

Fork

Fork the repository on your account by clicking on the fork button on the top right corner of the repository.

Clone the fork

Clone setup the repository on your local machine using this command

$ git clone git@github.com:[your_github_handle]/useReactHooks.git && cd useReactHooks


You might also need to generate a Personal Access Token due to new rules by Github.
Here's how to generate a Personal Access Token in case you don't know.

Installing Dependencies

Once you're inside the directory, run the following command to install all the dependencies and run the project.

  • npm install this will install everything
  • npm start this will run the server and open the page on localhost:3000

Creating custom hook

  • Go through the repostiry and the issues section for some ideas and try to create something unique. Make sure your hook doesn't match with any of the already exisitng hooks in the repository.
  • Create a folder inside src/hooks/, name it as per your hook name
  • Create a .tsx file inside the folder
  • Please consider writing descriptive names and quality comments for your hooks.

Your hook would look something like this

interface MagicType {
  type1: string,
  type2: number,
  ...
}

export function useMagicHook(): MagicType {
  // this custom hook does some serious magic

  return magic;
}

Submitting a PR

  • Creat and checkout a new branch using git checkout -B <branch-name>
    • Use git add . to stage your changes
    • Use git commit -m "your-commit-message" to commit your changes
    • Use git push origin <branch-name> to push changes to remote
  • Lastly, go to your fork and click on "Compare & Pull Request"
  • Write a brief discription about the PR and the changes you made

Our Awesome Contributors

GitHub

https://github.com/Anuragtech02/useReactHooks