Gare-react-hooks NPM

gare-react-hooks

Note

Please be aware. Some developers might identify this package as very gaer.

Installation

yarn add gare-react-hooks

Hooks

useFetch

import { useFetch } from 'gare-react-hooks'

type Data = {
  id: number,
  name: string
}

const Component = () => {
  const [error, data] =
    useFetch < Data > 'https://jsonplaceholder.typicode.com/todos'

  if (error) return <>{error}</>

  if (!data) return <>Loading ...</>

  return (
    <>
      {data.id} - {data.name}
    </>
  )
}

useActive

import { useActive } from 'gare-react-hooks'

const Component = () => {
  const [value, toggle, setActive, setInactive] = useActive(false)

  return (
    <div>
      <span>{value}</span>
      <button onClick={toggle}>Toggle</button>
      <button onClick={setActive}>Make true</button>
      <button onClick={setInactive}>Make false</button>
    </div>
  )
}

useDevice

import { useDevice } from 'gare-react-hooks'

const Component = () => {
  const isTablet = useDevice(769)

  return <div>{isTablet ? <span>isTablet</span> : <span>isElse</span>}</div>
}

useEventListener

import { useEventListener } from 'gare-react-hooks'

const App = () => {
  const enterFunction = () => console.log('enter')
  useEventListener(document, 'mouseenter', enterFunction)

  return <></>
}

useId

import { useId } from 'gare-react-hooks'

const App = () => {
  const id = useId()
  return <div id={id}>{id}</div>
}

useScrollIntoView

import { useScrollIntoView } from 'gare-react-hooks'

const App = () => {
  const [Wrapper, scrollToFunction] = useScrollIntoView({ behavior: 'smooth' })

  return (
    <div>
      <button onClick={() => scrollToFunction()}>Scroll!</button>
      <p>...</p>
      <Wrapper>
        <p>Scroll to here!</p>
      </Wrapper>
    </div>
  )
}

Cycles

import { onMount, onUnmount, onUpdate } from 'gare-react-hooks'

const App = () => {
  // componentDidMount
  onMount(() => console.log('Mount'))

  // componentDidUnmount
  onUnmount(() => console.log('Unmount'))

  // componentDidUpdate
  onUpdate(() => console.log('Update'))

  return <></>
}