useful-hooks

Useful react hooks

Install

npm install --save @hjmsw/useful-hooks

Usage

useDarkMode:

import * as React from 'react'

import { useDarkMode } from 'useful-hooks'

const Example = () => {
  const isDarkMode = useDarkMode()
  return (
    <div>
      {isDarkMode ? 'Dark mode' : 'Not dark mode'}
    </div>
  )
}

useOutsideClick:

import * as React from 'react'

import { useOutsideClick } from 'useful-hooks'

const Example = () => {
  const [clickedOutside, setClickedOutside] = React.useState(false)
  useOutsideClick(divRef, () => setClickedOutside(true));
  return (
    <div style={{ backgroundColor: 'red', color: 'white', height: '50px', padding: '1em' }} ref={divRef}>{clickedOutside ? 'Clicked!' : 'Click outside of me'}</div>
  )
}

useWindowSize:

import * as React from 'react'

import { useWindowSize } from 'useful-hooks'

const Example = () => {
  const { width, height } = useWindowSize();
  return (
    <div>
      Window height: {height}, window width: {width}
    </div>
  )
}

License

MIT © hjmsw

---

This hook is created using create-react-hook.