ColorToolAppContext.tsx

import React, { useState, createContext } from 'react';

import { HexInput } from '~/HexInput';
import { RgbaInput } from '~/RgbaInput';

interface ColorContextProps {
  hex: string;
  rgba: number[];

  setHex: (value) => void;
  setRgba: (value) => void;
};

export const ColorContext = createContext<ColorContextProps>({} as any);

export const ColorToolApp = () => {
  const [hex, setHex] = useState('');
  const [rgba, setRgba] = useState(['', '', '', '']);
  const state: ColorContextProps = {
    hex, rgba, setHex, setRgba,
  };

  return (
    <main>
      <ColorContext.Provider value={state}>
        <HexInput />
        <RgbaInput />
      </ColorContext.Provider>
    </main>
  );
};