https://github.com/charan379/react-hooks
This is a custom react hooks library for react based applications, This project is currenlty published at NPM with package name `@charan379/react-hooks`, so you can install it from NPM repository.
https://github.com/charan379/react-hooks
hooks hooks-api-react react react-hooks useonoutsideclick
Last synced: about 1 month ago
JSON representation
This is a custom react hooks library for react based applications, This project is currenlty published at NPM with package name `@charan379/react-hooks`, so you can install it from NPM repository.
- Host: GitHub
- URL: https://github.com/charan379/react-hooks
- Owner: charan379
- License: gpl-3.0
- Created: 2023-09-29T06:13:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-29T06:16:25.000Z (over 2 years ago)
- Last Synced: 2025-09-19T23:00:04.775Z (9 months ago)
- Topics: hooks, hooks-api-react, react, react-hooks, useonoutsideclick
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@charan379/react-hooks
- Size: 75.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-hooks
This is a custom react hooks library for react based applications.
## Installation
This project is currenlty published at NPM with package name `@charan379/react-hooks`, so you can install it from NPM repository.
```bash
npm install @charan379/react-hooks
```
## Usage
To import all hooks.
```bash
import * from "@charan379/react-hooks"
```
To import specific hook.
```bash
import { } from "@charan379/react-hooks"
```
### Example
```bash
import { useOnOutsideClick } from "@charan379/react-hooks";
```
### Use it in your component like
```bash
useOnOutsideClick(
# // [ ref : RefObject ] of element to be watched
ref,
# //[callBackFun; () => {} ] to be execute on outside click
() => {
console.log("Clicked out side this component");
},
# // [executeOnlyOnTouchDevices : boolean ] whether only watch on touchscreen devices only of all other devices.
# // by default false
false
);
```
### Example React Code
```bash
import { useOnOutsideClick } from "@charan379/react-hooks";
import React, { useCallback, useRef, useState } from "react";
const RevealOnClick = (props) => {
const thisComponentRef = useRef(null);
const [reveal, setReveal] = useState(false);
useOnOutsideClick(
thisComponentRef,
useCallback(() => {
setReveal(false);
}, [thisComponentRef.current]),
false
);
return (
# if user clicks outside this div
tag will not be rendered
.
.
# if user click on `Reveal Element` button tag will be rendered
setReveal(true)}>Reveal Element
.
.
{
reveal ?
This will render only if reveal true
: ""
}
.
.
)
}
export default RevealOnClick;
```
## Authors
- [@charan379](https://www.github.com/charan379)
## License
[](https://www.gnu.org/licenses/agpl-3.0.en.html)