Introducing React Hook Kit: A Comprehensive Toolkit for Your React Development

Dmytry Gorschkov — Tue, 25 Jul 2023 07:04:25 +0000

As a software developer, you're likely well-versed in the power and potential of React. Its versatility and convenience, coupled with the broad range of community-driven libraries and tools, make it a go-to framework for many developers. But, even within such a rich ecosystem, there's always room for innovation. Today, we introduce one such innovation: the React Hook Kit.

The React Hook Kit is an elegantly designed collection of custom React hooks, written and fully typed in TypeScript. From simplifying form handling to data fetching, local storage usage, and more, React Hook Kit seeks to provide a concise, efficient approach to many common development tasks. You can find the source code and contribute to the project on its GitHub repository.

What's New?

As of July 24, 2023, the React Hook Kit added a new hook to its arsenal: the useFetch hook. This handy tool reduces the hassle of fetching data from an API, streamlining the process and making your code more readable and maintainable.

Getting Started

To start using the React Hook Kit, you can simply install it via npm:

npm install react-hook-kit

A Glimpse of Available Hooks

useForm

The useForm hook simplifies the management of form state and validation. Here's a sample usage:

import React from "react";
import { useForm } from "react-hook-kit";

const MyForm = () => {
  const { formState, handleChange, resetForm } = useForm({
    name: "",
    email: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform form submission logic
  };

  // Render form with state and handlers
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formState.name}
        onChange={handleChange}
        placeholder="Name"
      />
      {/* More input fields... */}
      <button type="submit">Submit</button>
      <button type="button" onClick={resetForm}>
        Reset
      </button>
    </form>
  );
};

export default MyForm;

n this example, the useForm hook is effectively used to manage a form state containing name and email fields. handleChange updates the form state on user input, while resetForm restores the form to its initial state.

useLocalStorage

The useLocalStorage hook provides an effortless way to interact with localStorage, triggering component re-render whenever the stored value changes. Here's a quick example:

import { useLocalStorage } from "react-hook-kit";

function MyComponent() {
  const [value, setValue, removeValue, checkIfKeyExists] = useLocalStorage(
    "myKey",
    "defaultValue",
  );

  // Render component with value manipulators
  return (
    <div>
      <p>Stored Value: {value}</p>
      <button onClick={() => setValue("newValue")}>Set Value</button>
      <button onClick={() => removeValue()}>Remove Value</button>
      <p>Key exists: {checkIfKeyExists() ? "Yes" : "No"}</p>
    </div>
  );
}

This hook returns four elements: value (the current value in localStorage), setValue (a function to set the new value), removeValue (a function to remove the key-value pair), and checkIfKeyExists (a function to check if a key exists in localStorage).

useFetch

useFetch is a newly added custom hook that abstracts the fetching of data from an API:

import { useFetch } from "react-hook-kit";

function MyComponent() {
  const { data, isLoading, error } = useFetch("https://api.example.com/data");

  // Render component based on API fetch status
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data from API:</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

Test Assurance

Every hook in the React Hook Kit is fully tested with Jest and the React Testing Library, ensuring robust and reliable performance.

Contributing to the Project

Contributions to the React Hook Kit are always welcome! We appreciate ideas, improvements, and bug fixes. Don't hesitate to open an issue or submit a pull request on our GitHub repository.

License

The React Hook Kit is licensed under the MIT License, fostering wide usability and potential for customization.

React Hook Kit aims to simplify your React projects, making the process smoother and more enjoyable. Give it a spin and let us know your feedback!

Visit the React Hook Kit Documentation for more information and examples of other available hooks.

Happy coding!

DEV Community: Dmytry Gorschkov