useColor.ts

import { useContext } from 'react';
import parse from 'parse-color';

import { ColorAppContext } from '~/ColorApp';

export function useColor() {
  const { hex, rgba, setHex, setRgba } = useContext(ColorAppContext);

  const updateHex = hexValue => {
    const { hex, rgba } = parse(hexValue);

    setHex(hexValue);
    setRgba(rgba);
  };

  const updateRgba = rgbaValue => {
    const { hex, rgba } = parse(rgbaValue);

    setRgba(rgbaValue);
    setHex(hex);
  };

  return { hex, rgba, updateHex, updateRgba };
}