wonderhooks

Useful Hooks developed and integrated by Wonderful

Install

yarn add wonderhooks

Usage

useDebounce

The debounce function delays the processing of the keyup event until the user has stopped typing for a set amount of time. This drastically reduces the number of automatic API calls sent to your server.

import React, { useState, useEffect } from 'react';
import { useDebounce } from 'wonderhooks';

const App = () => {
  const [value, setValue] = useState('')
  const debounce = useDebounce(value, 2000)

  useEffect(() => {
    // Called once value updates
  }, debounce);

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

useTypewriter

A visual effect that returns the string as if a person was typing it

import React, { useState, useEffect } from 'react';
import { useTypewriter } from 'wonderhooks';

const App = () => {
  const word = useTypewriter('Hello! Welcome to my example', 1000);

  return (
    <div>
      {word}
    </div>
  )
}

License

MIT © Wonderful