A collection of useful react libraries

At the moment, the library contains several react hooks. In future releases it is planned to add useful components and helper functions.

• Usage
  • Installation
• Hooks
  • useCombinedRefs
  • usePrevious
  • usePreviousDifferent
  • useShallowEqualSelector
  • useDeepEqualSelector

Installation

npm install ii-react-libraries # or yarn add ii-react-libraries

Hooks

useCombinedRefs

const ref = useCombinedRefs(...refs)

Merges refs into one ref. Useful when you need to bind more than one ref to DOM element.

Usage example:

import { useCombinedRefs } from "ii-react-libraries";
import { useDrag, useDrop } from "react-dnd";

function App() {
  const domRef = useRef(null);

  const [, dragRef] = useDrag({
    // ...
  });

  const [, dropRef] = useDrop({
    // ...
  });

  return (
    <div ref={useCombinedRefs(domRef, dragRef, dropRef)}></div>
  );
}

usePrevious

const prevValue = usePrevious(initialValue);

One question that comes up a lot is "When using hooks how do I get the previous value of props or state?". With React class components you have the componentDidUpdate method which receives previous props and state as arguments or you can update an instance variable (this.previous = value) and reference it later to get the previous value. So how can we do this inside a functional component that doesn't have lifecycle methods or an instance to store values on? Hooks to the rescue! We can create a custom hook that uses the useRef hook internally for storing the previous value. See the recipe below with inline comments. You can also find this example in the official React Hooks FAQ.

Usage example:

import { useState, useEffect, useRef } from 'react';
import { usePrevious } from "ii-react-libraries";

// Usage
function App() {
  // State value and setter for our example
  const [count, setCount] = useState(0);
  
  // Get the previous value (was passed into hook on last render)
  const prevCount = usePrevious(count);
  
  // Display both current and previous count value
  return (
    <div>
      <div>Now: {count}, before: {prevCount}</div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
   );
}

usePreviousDifferent

const prevDifferentValue = usePreviousDifferent(initialValue);

Like usePrevious, but returns previous value, different from the current

useShallowEqualSelector

const result = useShallowEqualSelector(selector);

This hook uses useSelector() with shallow equality.

It is shortcut for this code:

import { useSelector, shallowEqual } from "react-redux";

useSelector(selector, shallowEqual);

Usage example:

import { useShallowEqualSelector } from "ii-react-libraries";

useShallowEqualSelector(selector);

useDeepEqualSelector

const result = useDeepEqualSelector(selector[, customizer])

This hook uses useSelector() with deep equality. For comparison function Lodash's _.isEqualWith() is used. You can pass optional customizer parameter which is invoked to compare values. If customizer returns undefined, comparisons are handled by the method instead. The customizer is invoked with up to six arguments: (objValue, othValue [, index|key, object, other, stack]).

Usage example:

import { useDeepEqualSelector } from "ii-react-libraries";

function isGreeting(value) {
  return /^h(?:i|ello)$/.test(value);
}

function customizer(objValue, othValue) {
  if (isGreeting(objValue) && isGreeting(othValue)) {
    return true;
  }
}

useDeepEqualSelector(selector, customizer);