Skip to content

daniknewgarden/amazing-react-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 

Repository files navigation

Amazing React hooks βš“

Hi! This is useful hooks for your React app πŸ‘¨β€πŸ’».

See demo on CodeSandbox

Description

useBrowserTheme 🎨

Allows you to find out if a dark theme is activated in the system. It returns true if dark theme is activated.

Example

import { useBrowserTheme } from "./hooks/useBrowserTheme";

export default function App() {

  const darkTheme = useBrowserTheme();

  return (
    <div className={`App ${darkTheme ? "dark" : "light"}`}>
      <h2>System prefers {darkTheme ? "dark" : "light"} theme</h2>
    </div>
  );
}

useDate πŸ“…

Returns current date (year, mount, mount name, day, day name).

Argument Type Description
shortNames boolean use short names for mounts and days

Example

import { useDate } from "./hooks/useDate";

export default function App() {

  const date = useDate(false);

  return (
    <div className="App">
      {date && (
        <h2>
          Year: {date.year},
          mount: {date.month}, {date.monthName},
          day: {date.day}, {date.dayName}
        </h2>
      )}
    </div>
  );
}

useTime πŸ••

Returns current time and the angle of analog clock arrows.

Argument Type Description
interval number update interval (ms)
string boolean return data on string type

Example

import { useTime } from "./hooks/useTime";

export default function App() {

  const time = useTime();

  return (
    <div className="App">
      {time && (
        <h2>
          {time.hours}:{time.minutes}:{time.seconds}
        </h2>
      )}
    </div>
  );
}

usePosition πŸ“‘

Sends a request to access the location and returns the latitude and longitude.

Example

import { usePosition } from "./hooks/usePosition";

export default function App() {

  const position = usePosition();

  return (
    <div className="App">
      {position.location && (
        <>
          <h2>latitude: {position.location.latitude}</h2>
          <h2>longitude: {position.location.longitude}</h2>
        </>
      )}
    </div>
  );
}

useClickOutside πŸ‘†

Allows you to tracks clicks outside the item to do something.

Argument Type Description
ref useRef() react link to your item
callback function callback function
enabled boolean optional argument (initial = true)

Example

import React, { useRef } from "react";
import { useClickOutside } from "way to useClickOutside";

export const Dropdown = () => {
 const [opened, setOpened] = useState(false);

 const toggleOpened = () => {
  setOpened(!opened)
 }

 //Click outside track
 const menuRef = useRef();
 useClickOutside({ref: menuRef, callback: toggleOpened});

 return(
  <button>{opened ? 'Close' : 'Open'} menu </button>
  {opened && <div ref={menuRef}>Menu</div>}
 )
}

About

My hooks βš“ for React apps πŸ’».

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published