useFormAndClickTracker

useFormAndClickTracker is a React custom hook for tracking form data and user click positions. It also provides a consent popup for users to allow cookie storage before any data is saved.

Installation

To install the package, run:

npm install use-form-and-click-tracker

Usage

import useFormAndClickTracker from 'use-form-and-click-tracker';
import ConsentPopup from './ConsentPopup'

Example Component

import React from 'react';
import useFormAndClickTracker from 'use-form-and-click-tracker';
import ConsentPopup from './ConsentPopup';

const FormComponent = ({ pageName, metadata }) => {
  const { formData, clickData, handleFormChange, hasConsent, showConsentPopup, handleConsent } = useFormAndClickTracker(pageName, metadata);

  return (
    <div>
      {showConsentPopup && <ConsentPopup onConsent={handleConsent} />}
      {hasConsent ? (
        <>
          <div data-section="section1">
            <h2>Section 1</h2>
            <form>
              <input
                type="text"
                name="username"
                value={formData.username || ''}
                onChange={handleFormChange}
                placeholder="Username"
              />
              <input
                type="email"
                name="email"
                value={formData.email || ''}
                onChange={handleFormChange}
                placeholder="Email"
              />
              <input
                type="password"
                name="password"
                value={formData.password || ''}
                onChange={handleFormChange}
                placeholder="Password"
              />
            </form>
          </div>
          <div data-section="section2">
            <h2>Section 2</h2>
            <button onClick={() => alert('Button in Section 2 clicked')}>Click me</button>
          </div>
          <div>
            <p>Total Clicks: {clickData.clickCount}</p>
            <p>Click Positions:</p>
            <ul>
              {clickData.clickPositions.map((pos, index) => (
                <li key={index}>X: {pos.x}, Y: {pos.y}, Section: {pos.section}</li>
              ))}
            </ul>
          </div>
        </>
      ) : (
        <p>Please allow cookies to use the form.</p>
      )}
    </div>
  );
};
export default FormComponent;

Consent Popup Component

Create a separate file for the consent

popup component:

import React from 'react';

const ConsentPopup = ({ onConsent }) => {
  const handleAccept = () => {
    onConsent(true);
  };

  const handleDecline = () => {
    onConsent(false);
  };

  return (
    <div style={popupStyle}>
      <p>Do you allow us to store cookies to improve your experience?</p>
      <button onClick={handleAccept} style={buttonStyle}>Accept</button>
      <button onClick={handleDecline} style={buttonStyle}>Decline</button>
    </div>
  );
};

const popupStyle = {
  position: 'fixed',
  bottom: '20px',
  right: '20px',
  backgroundColor: '#fff',
  padding: '15px',
  boxShadow: '0px 0px 10px rgba(0,0,0,0.1)',
  borderRadius: '5px',
  zIndex: 1000
};

const buttonStyle = {
  margin: '5px'
};

export default ConsentPopup;

Example Usage in an App

import React from 'react';
import FormComponent from './FormComponent';

const App = () => {
 const pageName = 'Home Page';
 const metadata = { title: 'Home', description: 'Welcome to the homepage' };

 return (
   <div>
     <FormComponent pageName={pageName} metadata={metadata} />
   </div>
 );
};

export default App;

API

useFormAndClickTracker(pageName, metadata)

Parameters pageName (string): The name of the current page. metadata (object): An object containing metadata about the page. Returns formData (object): An object containing the form data. clickData (object): An object containing the click data (click count and click positions). handleFormChange (function): A function to handle form changes. hasConsent (boolean): A boolean indicating whether the user has given consent for cookie storage. showConsentPopup (boolean): A boolean indicating whether to show the consent popup. handleConsent (function): A function to handle user consent.

License

MIT