priyanka-gh / custom-hooks Goto Github PK

import React,{useState} from 'react';
import {useCopyToClipboard} from 'customutilityhooks/custom-hooks'

function App() {
  const [text, setText] = useState('');
  const { isCopied, copyToClipboard } = useCopyToClipboard();

  return (
    <div>
      <h1>Copy to Clipboard Example</h1>
      <input
        type="text"
        placeholder="Enter text"
        onChange={(event) => setText(event.target.value)}
      />
      <button
        onClick={() => copyToClipboard(text)}
        disabled={!text}
      >
        Copy
      </button>
      <p>
        <strong>Copied:</strong> {isCopied ? text : 'No text has been copied yet.'}
      </p>
    </div>
  );
}

export default App;

import React,{useState} from 'react';
import {useCountdown} from 'customutilityhooks/custom-hooks'


const App = () => {
  const countdown = useCountdown(new Date(Date.now() + 10000));
  const renderedCountdown = countdown.toString();

  return (
    <div>
      <h1>Countdown Timer</h1>
      <p>Time remaining: {renderedCountdown}</p>
    </div>
  );
};

export default App;

import React,{useState, useEffect} from 'react';
import {useDarkMode} from 'customutilityhooks/custom-hooks'

const App = () => {
  const [darkMode, setDarkMode] = useState(false);

  const handleToggleDarkMode = () => {
    setDarkMode((prev) => !prev);
  };

  useEffect(() => {
    const body = document.body;

    if (darkMode) {
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
    } else {
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
    }
  }, [darkMode]);

  return (
    <div>
      <h1>Dark Mode</h1>
      <p>
        You can toggle dark mode by clicking on the button below.
      </p>
      <button onClick={handleToggleDarkMode}>Toggle Dark Mode</button>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useDebouncer } from 'customutilityhooks/custom-hooks';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const apiURL = `https://api.postalpincode.in/pincode/${searchTerm}`; // Replace with your API endpoint

  const searchData = useDebouncer(searchTerm, apiURL);

  const handleInputChange = (event) => {
    setSearchTerm(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleInputChange}
        placeholder="Search..."
      />
      <div>
        {searchData ? (
          <ul>
            {searchData.map((item) => (
              <li key={item.PostOffice[0].Pincode}>{item.PostOffice[0].Name}</li>
            ))}
          </ul>
        ) : (
          <p>No results yet.</p>
        )}
      </div>
    </div>
  );
};

export default App;

import React,{useState} from 'react';
import {useDropzone} from 'customutilityhooks/custom-hooks'

function App() {
  const [files, setFiles] = useState([]);

  const {
    isDragging,
    handleDragEnter,
    handleDragLeave,
    handleDragOver,
    handleDrop,
  } = useDropzone({
    onDrop: (files) => {
      setFiles(files);
    },
  });

  return (
    <div>
      <h1>Drag and Drop Example</h1>
      <p>
        Drag and drop some files here.
      </p>
      <div
        {...handleDragEnter}
        {...handleDragOver}
        {...handleDragLeave}
        {...handleDrop}
      >
        <input type="file" multiple />
      </div>
      <ul>
        {files.map((file) => (
          <li key={file.name}>
            {file.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

import React from "react";
import { useGeolocation } from "customutilityhooks/custom-hooks";

const App = () => {
  const { latitude, longitude, error } = useGeolocation();

  return (
    <div>
      {error ? (
        <p>Error: {error}</p>
      ) : (
        <>
          <p>Latitude: {latitude}</p>
          <p>Longitude: {longitude}</p>
        </>
      )}
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useIdle } from 'customutilityhooks/custom-hooks';

const App = () => {
  const isIdle = useIdle(3000); // Timeout set to 3000ms (3 seconds)

  return (
    <div>
      <h1>Idle Detection Example</h1>
      <p>User is {isIdle ? 'Idle' : 'Active'}</p>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useLocalStorage } from 'customutilityhooks/custom-hooks';

const App = () => {
  const { value, setValueInLocalStorage } = useLocalStorage('myData', '');

  const handleInputChange = (event) => {
    setValueInLocalStorage(event.target.value);
  };

  return (
    <div>
      <h1>Local Storage Example</h1>
      <input
        type="text"
        value={value}
        onChange={handleInputChange}
        placeholder="Enter value..."
      />
      <p>Value in Local Storage: {value}</p>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useMousePosition } from 'customutilityhooks/custom-hooks';

const App = () => {
  const { x, y } = useMousePosition();

  return (
    <div>
      <h1>Mouse Position Example</h1>
      <p>X: {x}</p>
      <p>Y: {y}</p>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useScroll } from 'customutilityhooks/custom-hooks';

const App = () => {
  const { x, y } = useScroll();

  return (
    <div>
      <h1>Scroll Position Example</h1>
      <p>Scroll X: {x}</p>
      <p>Scroll Y: {y}</p>
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useToggle } from 'customutilityhooks/custom-hooks';

const App = () => {
  const [isToggled, toggle] = useToggle();

  return (
    <div>
      <h1>Toggle Example</h1>
      <button onClick={toggle}>Toggle</button>
      {isToggled ? <p>Toggle is ON</p> : <p>Toggle is OFF</p>}
    </div>
  );
};

export default App;

import React, { useState } from 'react';
import { useValidation } from 'customutilityhooks/custom-hooks';

const App = () => {
  const initialFormState = {
    name: '',
    email: '',
    password: '',
  };

  const validationRules = {
    name: [{ name: 'required' }],
    email: [{ name: 'required' }, { name: 'minLength', value: 5 }],
    password: [{ name: 'required' }, { name: 'minLength', value: 8 }],
  };

  const { values, errors, handleChange, handleSubmit } = useValidation(
    initialFormState,
    validationRules
  );

  return (
    <div>
      <h1>Form Validation Example</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={values.name}
            onChange={handleChange}
          />
          {errors.name && <p>{errors.name}</p>}
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={values.email}
            onChange={handleChange}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            id="password"
            name="password"
            value={values.password}
            onChange={handleChange}
          />
          {errors.password && <p>{errors.password}</p>}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;