kalcifer / React Powerhooks

react-powerhooks

⚠️ Warning: hooks are not part of a stable React release yet, so use this library only for experiments

Demo

Install

yarn add react-powerhooks

About

react-powerhooks is a set of react custom-hooks equivalent to the render props components in react-powerplug Heavily inspired by react-hangers The logo is from wikimedia commons

API

useToggle

This is a hook that lets you toggle between boolean values. It needs an initialValue to work with.

Usage

const initialValue = true;
const [currentValue, toggleAway] = useToggle(initialValue);

useActive

This hook lets you know when your mouse pointer is active on a particular element. It needs a ref of the element in question to work with. It can also take an onChange callback which it calls everytime the active state changes. The onChange function recieves the current active state of the element as a boolean value.

Usage

const ref = useRef(null); // Use the ref in the element concerned.
// More about useRef here https://reactjs.org/docs/hooks-reference.html#useref
const activeValue = useActive({ refEl: ref });

useInterval

This hook starts an interval timer that can be stopped/resumed any time. It takes in startImmediate which decides whether the interval is on by default. It also takes a time which is the interval duration.

It provides a start and stop method which allow us to control the state of the interval.

Usage

const [time, setTime] = useState(null);
const { start, stop } = useInterval({
  duration: 1000,
  startImmediate: false,
  callback: () => {
    setTime(new Date().toLocaleTimeString());
  }
});

return (
  <Fragment>
    <div>The time is now {time}</div>
    <button onClick={() => stop()}>Stop interval</button>
    <button onClick={() => start()}>Start interval</button>
  </Fragment>
);

useMap

This hook allows you to use a map object and get methods to manipulate the map. Takes an initialValue

Usage

const {
  set: setKey,
  get: getKey,
  has,
  delete: deleteKey,
  clear,
  reset,
  values
} = useMap({ name: "PK", age: "30", occupation: "Reactor" });