Skip to content

Commit 56207aa

Browse files
itszeeshanitszeeshan
authored
docs: create root for github pages
1 parent b63297d commit 56207aa

File tree

1 file changed

+121
-0
lines changed

1 file changed

+121
-0
lines changed

‎docs/index.md

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# <img src="./images/icon.png" alt="drawing" width="35"/> React Custom Hooks Snippets for VS Code
2+
3+
Enhance your development workflow with this VS Code extension that offers a collection of useful React Custom hooks as code. Whether you're using JavaScript or TypeScript, this extension dynamically loads and provides snippets from external files, to fit your project needs.
4+
5+
## What It Does
6+
7+
- **Hooks Snippets**: Provides ready-to-use snippets for various React hooks.
8+
- **Automatic Loading**: Loads snippets from files, including hooks that depend on others.
9+
- **File Type Detection**: Chooses the right snippet based on whether you're using JavaScript or TypeScript.
10+
11+
## Supported File Ext
12+
13+
- `.js`
14+
- `.ts`
15+
- `.jsx`
16+
- `.tsx`
17+
18+
## How to Use
19+
20+
1. Open a JavaScript or TypeScript file in VS Code.
21+
2. Type the snippet prefix (e.g., `useFetch`).
22+
3. Select the snippet from the suggestion list to insert it into your code.
23+
24+
![Manual](./images/assets/manual.gif)
25+
26+
### Javascript Support With Javascript code
27+
28+
![Javascript Support With Javascript code](./images/assets/javascript-support.png)
29+
30+
### Typescript Support With Typescript code
31+
32+
![Typescript Support With Typescript code](./images/assets/typescript-support.png)
33+
34+
## Available Snippets
35+
36+
Here are some of the snippets you can use:
37+
38+
| Hook | Description |
39+
| -------------------------- | ---------------------------------------------------------------------------------------------------------- |
40+
| **useFetch** | A hook to fetch data from a URL. |
41+
| **useAsync** | A hook to handle asynchronous tasks. |
42+
| **useArray** | A hook for managing and manipulating an array with functions like push, filter, update, remove, and clear. |
43+
| **useClickOutside** | A hook to detect clicks outside a specified element and trigger a callback. |
44+
| **useCookie** | A hook for managing cookies with get, set, and delete functionality. |
45+
| **useCopyToClipboard** | A hook to copy text to the clipboard and track success. |
46+
| **useDebounce** | A hook to debounce a callback function with a specified delay. |
47+
| **useDeepCompareEffect** | A hook for running an effect with dependencies that are deeply compared. |
48+
| **useEffectOnce** | A hook to run an effect only once on mount. |
49+
| **useGeolocation** | A hook to get and watch the user's geolocation. |
50+
| **useHover** | A hook to track whether an element is being hovered over. |
51+
| **useMediaQuery** | A hook to detect whether a media query matches. |
52+
| **useOnlineStatus** | A hook to detect the online/offline status of the browser. |
53+
| **useOnScreen** | A hook to detect if an element is visible within the viewport. |
54+
| **usePrevious** | A hook to keep track of the previous value of a state or prop. |
55+
| **useRenderCount** | A hook to count the number of times a component has rendered. |
56+
| **useScript** | A hook to dynamically load a script and handle its loading state. |
57+
| **useStorage** | A generic hook for managing state with a storage mechanism (e.g., localStorage, sessionStorage). |
58+
| **useSessionStorage** | A hook for managing state with sessionStorage. |
59+
| **useLocalStorage** | A hook for managing state with localStorage. |
60+
| **useDarkMode** | A hook to manage dark mode state and apply dark mode styling based on user preference and localStorage. |
61+
| **useTimeout** | A hook to manage a timeout with set, clear, and reset functionalities. |
62+
| **useToggle** | A hook to toggle a boolean value. |
63+
| **useUpdateEffect** | A hook to run an effect only on updates, not on the initial mount. |
64+
| **useWindowSize** | A hook to track the window size and update on resize events. |
65+
| **useStateWithHistory** | A hook to manage state with an undo/redo history mechanism. |
66+
| **useStateWithValidation** | A hook to manage state with validation, providing validity status. |
67+
| **useLongPress** | A hook to detect long press interactions on an element. |
68+
| **useDebugInformation** | A hook to provide debugging information, including render count and changed props. |
69+
| **useEventListener** | A hook to add an event listener to a specified element and clean up on unmount. |
70+
71+
### Hook Documentation
72+
73+
For detailed information about each hook, check out the following links:
74+
75+
- [useFetch Documentation](/useFetch.md)
76+
- [useAsync Documentation](/useAsync.md)
77+
- [useArray Documentation](/useArray.md)
78+
- [useClickOutside Documentation](/useClickOutside.md)
79+
- [useCookie Documentation](/useCookie.md)
80+
- [useCopyToClipboard Documentation](/useCopyToClipboard.md)
81+
- [useDebounce Documentation](/useDebounce.md)
82+
- [useDeepCompareEffect Documentation](/useDeepCompareEffect.md)
83+
- [useEffectOnce Documentation](/useEffectOnce.md)
84+
- [useGeolocation Documentation](/useGeolocation.md)
85+
- [useHover Documentation](/useHover.md)
86+
- [useMediaQuery Documentation](/useMediaQuery.md)
87+
- [useOnlineStatus Documentation](/useOnlineStatus.md)
88+
- [useOnScreen Documentation](/useOnScreen.md)
89+
- [usePrevious Documentation](/usePrevious.md)
90+
- [useRenderCount Documentation](/useRenderCount.md)
91+
- [useScript Documentation](/useScript.md)
92+
- [useStorage Documentation](/useStorage.md)
93+
- [useSessionStorage Documentation](/useSessionStorage.md)
94+
- [useLocalStorage Documentation](/useLocalStorage.md)
95+
- [useDarkMode Documentation](/useDarkMode.md)
96+
- [useTimeout Documentation](/useTimeout.md)
97+
- [useToggle Documentation](/useToggle.md)
98+
- [useUpdateEffect Documentation](/useUpdateEffect.md)
99+
- [useWindowSize Documentation](/useWindowSize.md)
100+
- [useStateWithHistory Documentation](/useStateWithHistory.md)
101+
- [useStateWithValidation Documentation](/useStateWithValidation.md)
102+
- [useLongPress Documentation](/useLongPress.md)
103+
- [useDebugInformation Documentation](/useDebugInformation.md)
104+
- [useEventListener Documentation](/useEventListener.md)
105+
106+
## Contributing
107+
108+
Contributions are welcome! Please open an issue or submit a pull request if you have suggestions or improvements.
109+
110+
1. Fork the repository.
111+
2. Create a new branch for your changes.
112+
3. Make your changes and test them.
113+
4. Submit a pull request.
114+
115+
## Shout Out:
116+
117+
Thanks to [sergeyleschev](https://github.com/sergeyleschev) for creating such amazing hooks, support him the best you can because he is doing a great job!
118+
119+
## License
120+
121+
This project is licensed under the MIT License. Check the [LICENSE](LICENSE) file for details.

0 commit comments

Comments
 (0)