react-hooks

A collection of hooks we find ourselves turning to in multiple projects

Install

npm install --save @bellawatt/react-hooks

Usage

useDebounceEffect

import React, { useState } from 'react'
import axios from 'axios';
import { useDebounceEffect } from '@bellawatt/react-hooks'

const DebounceEffectExample = () => {
  const [value, setValue] = useState('');

  useDebounceEffect(() => {
    someSlowFunction();
  }, 1000, [value]));

  return (
    <div>
      <input value={value} onChange={e => setValue(e.currentTarget.value)} />
    </div>
  )
}

useToggle

import React from 'react'
import { useToggle } from '@bellawatt/react-hooks'
import { Modal } from 'reactstrap'

const ToggleExample = () => {
  const [open, toggle] = useToggle(false)

  return (
    <Modal isOpen={open} toggle={toggle}>
      ...
    </Modal>
  )
}

useLocalStorage

import React from 'react'
import { useLocalStorage } from '@bellawatt/react-hooks'

const LocalStorageExample = () => {
  const [storedData, setStoredData] = useLocalStorage('name-of-key')

  // ..
}

useGoogleAnalytics

** Requires a peer of react-router-dom and react-ga **

import React from 'react'
import { useGoogleAnalytics } from '@bellawatt/react-hooks'

const GoogleAnalyticsExample = () => {
  useGoogleAnalytics('google-key')

  // ..
}

useQueryString

** Requires a peer of react-router-dom **

import React from 'react'
import { useQueryString } from '@bellawatt/react-hooks'

const QueryStringExample = () => {
  const [urlInputs, updateQueryString] = useQueryString()

  // ..
}

License

MIT © bellawatt

This hook is created using create-react-hook.