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.
Top comments (1)
How did you build out the cli that will add the hooks one by one?
like this command
npx scriptkavi-hooks@latest add batteryIt will be great if you post an article on that as well.
Much thanks.