https://github.com/biohacker0/detection-tracking-hooks
A library of hooks to know what thing someone copied, how much time they spent on a page, track their session data, detect print requests on pages, page view counts etc
https://github.com/biohacker0/detection-tracking-hooks
Last synced: 14 days ago
JSON representation
A library of hooks to know what thing someone copied, how much time they spent on a page, track their session data, detect print requests on pages, page view counts etc
- Host: GitHub
- URL: https://github.com/biohacker0/detection-tracking-hooks
- Owner: biohacker0
- Created: 2024-02-28T13:44:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T14:04:48.000Z (over 2 years ago)
- Last Synced: 2025-10-24T12:40:53.468Z (9 months ago)
- Language: JavaScript
- Size: 325 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This repository contains custom React hooks designed to enhance your application's functionality in various aspects including copy detection, error tracking, print detection, page view tracking, and measuring time spent on a page.
## Table of Contents
1. [Introduction](#introduction)
2. [Installation](#installation)
3. [Usage](#usage)
- [useCopyDetection](#usecopydetection)
- [useErrorTracking](#useerrortracking)
- [usePrintDetection](#useprintdetection)
- [usePageViewTracking](#usepageviewtracking)
- [useTimeSpentOnPage](#usetimespentonpage)
## Introduction
This collection of custom hooks provides convenient solutions to common problems faced in web development when working with React applications. Each hook serves a specific purpose and can be easily integrated into your project to enhance user experience and developer productivity.
## Installation
To use these custom hooks in your React project, you can simply copy the hook files (`useCopyDetection.js`, `useErrorTracking.js`, `usePrintDetection.js`, `usePageViewTracking.js`, `useTimeSpentOnPage.js`) into your project's directory. Make sure to adjust the import paths according to your project structure.
## Usage
### useCopyDetection
This hook detects when text is copied on the webpage and invokes a callback function with the copied text as a parameter.
```javascript
import { useState } from 'react';
import useCopyDetection from './useCopyDetection';
const App = () => {
const handleCopy = (copiedText) => {
console.log("Copied text:", copiedText);
// Perform actions with the copied text
};
useCopyDetection(handleCopy);
return (
// Your JSX components
);
};
```
### useErrorTracking
This hook tracks errors that occur within your application and sends them to a designated error tracking service.
```javascript
import useErrorTracking from './useErrorTracking';
const App = () => {
useErrorTracking();
// Simulate an error
const throwError = () => {
throw new Error("This is a test error");
};
return (
Error Tracking Test
Throw Error
);
};
```
### usePrintDetection
This hook detects when the user initiates a print action on the webpage.
```javascript
import { useState } from 'react';
import usePrintDetection from './usePrintDetection';
const App = () => {
const [isPrinting, setIsPrinting] = useState(false);
usePrintDetection(setIsPrinting);
return (
Print Detection Test
Is Printing: {isPrinting ? "Yes" : "No"}
);
}
```
### usePageViewTracking
This hook tracks the number of page views using session storage.
```javascript
import { useEffect, useState } from 'react';
import usePageViewTracking from './usePageViewTracking';
const App = () => {
const [pageViews, setPageViews] = useState(0);
useEffect(() => {
const pageViews = parseInt(sessionStorage.getItem("page_view_tracker_page_views"), 10) || 0;
setPageViews(pageViews);
console.log("Page Views:", pageViews);
}, []);
usePageViewTracking(); // Make sure to call usePageViewTracking after initializing the state
return (
// Your JSX components
);
};
```
### useTimeSpentOnPage
This hook measures the time spent by the user on the current page.
```javascript
import useTimeSpentOnPage from './useTimeSpentOnPage';
const App = () => {
const timeSpent = useTimeSpentOnPage();
return (
Time Spent On Page Test
Time Spent On Page: {timeSpent} seconds
);
};
```