ToggleManager.tsx

import React, { useState, useMemo, useContext } from 'react';

interface ToggleState {
  items: any[];
  toggleItem: (item: any, toggled?: boolean) => boolean;
}

const ToggleContext = React.createContext<ToggleState>({
  items: [],
  toggleItem: () => false,
});

const ToggleManager: React.FC<{ comparator: (a: any, b: any) => boolean }> = ({ children, comparator = (a, b) => a === b }) => {
  const [items, setItems] = useState<any[]>([]);

  const context = useMemo<ToggleState>(() => ({
    items,
    toggleItem: (item: any, toggled?: boolean) => {
      const remove = toggled === false || (toggled === undefined && items.some(el => comparator(el, item)));

      if (remove) {
        setItems(items.filter(el => !comparator(el, item)));
        return false;
      } else {
        setItems([...items, item]);
        return true;
      }
    }
  }), [items]);

  return (
    <ToggleContext.Provider value={context}>
      {children}
    </ToggleContext.Provider>
  )
}

const useToggle = (item: any): [boolean, (toggled?: boolean) => boolean] => {
  const { items, toggleItem: toggle } = useContext(ToggleContext);

  return [
    items.includes(item),
    (toggled?: boolean) => toggle(item, toggled)
  ];
}

export default ToggleManager;

export {
  useToggle,
}