Hook for checkbox functionality

useCheckbox.ts

import React, {useCallback, useMemo} from 'react';

export const useCheckbox = (allValues: string[], selected: string[], onChange: (newSelection: string[]) => void) => {

    const selectedStatesObj = useMemo(() => (selected || []).reduce((p, c) => ({
        ...p,
        [c]: true
    }), {} as {[id: string]: boolean}), [selected]);


    const onAllChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
        const selected = event.target.checked;
        if (selected) {
            onChange(allValues);
            return;
        }
        onChange([])
    }, [onChange, allValues]);

    const areAllChecked = useCallback(() => {
        const keys = Object.keys(selectedStatesObj);
        return keys.every(k => selectedStatesObj[k]) && keys.length === allValues.length && keys.every((cKey) => allValues.indexOf(cKey) >= 0);
    }, [selectedStatesObj, allValues]);


    const createOnChangeHandler = useCallback((key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
        const checked = e.target.checked;
        const newStates = {...selectedStatesObj, [key]: checked};
        onChange(Object.keys(newStates).reduce((p, c) => {
            const v = newStates[c];
            if (v) {
                return [...p, c]
            }
            return p
        }, [] as string[]));

    }, [onChange, selectedStatesObj]);

    const isChecked = useCallback((k: string) => {
        return selected.indexOf(k) > -1;
    }, [selected]);

    return {
        createOnChangeHandler,
        onAllChange,
        areAllChecked,
        isChecked,
    }
};