scriptkavi/hooks: Customizable and Open Source React Hooks

What is scriptkavi/hooks?

In the fast-paced world of web development, staying ahead means constantly evolving and adopting new tools and practices. React, one of the most popular JavaScript libraries, introduced hooks to simplify state management and side effects in functional components. However, as powerful as hooks are, we saw an opportunity to take them even further.

scriptkavi/hooks is a collection of re-usable hooks that you can copy and paste into your apps.

How to install scriptkavi/hooks in your NextJS application?

Start by creating a new Next.js project using create-next-app:

npx create-next-app@latest scriptkavi-app --typescript --eslint

Now enter scriptkavi-app by running

cd scriptkavi-app

Install package dependencies by running

npm install

Run the scriptkavi-hooks init command to setup your project:

npx scriptkavi-hooks@latest init

You will be asked a few questions to configure hooks.json:

Would you like to use TypeScript (recommended)? no/yes
Which codestyle would you like to use? › React Hooks
Configure the import alias for hooks: › @/hooks
Configure the import alias for utils: › @/lib/utils

That's it

You can now start adding hooks to your project.

npx scriptkavi-hooks@latest add debounce

The command above will add the Debounce hook to your project. You can then import it like this:

import { useDebounce } from "@/hooks/debounce"

export default function App() {
  const [searchTerm, setSearchTerm] = React.useState("js")
  const debouncedSearchTerm = useDebounce(searchTerm, 300)

  const handleChange = (e) => {
    setSearchTerm(e.target.value)
  }

  React.useEffect(() => {
    const callApi = async () => {
      if (debouncedSearchTerm) {
        // Call Api
      }
    }
    callApi()
  }, [debouncedSearchTerm])

  return (
    <form>
      <input
        name="search"
        placeholder="Search something..."
        onChange={handleChange}
      />
    </form>
  )
}

There is a massive list of hooks you can add that scriptkavi/hooks provides, you can find the list here.

Similarly you can add other hooks like,

npx scriptkavi-hooks@latest add battery

npx scriptkavi-hooks@latest add click-away

and many more...

Frameworks support

scriptkavi/hooks supports NextJS and Vite

Join the Revolution

Our library is open source so you can start contributing to the project by adding more hooks. You can find the github project here.

Our mission is to empower developers to build amazing applications with ease and efficiency. By providing a robust set of hooks, we aim to transform the way you develop with React. Explore our documentation, contribute to the project, and be part of the revolution in React development.