Hook

function App() {
    const [colorRef, color] = useColorChange();

    return (
        <div className="App">
            <header className="App-header">
            <deckgo-color ref={colorRef}></deckgo-color>

            <img src={logo} className="App-logo"
                 alt="logo" style={{background: color}}/>
            </header>
        </div>
    );
}

function useColorChange() {
    const [data, setData] = useState(undefined);
    const colorRef = useRef();

    useEffect(() => {
        const ref = colorRef.current;

        const colorListener = ($event) => {
            setData($event.detail.hex);
        };

        ref.addEventListener('colorChange', colorListener, false);

        return () => {
            ref.removeEventListener('colorChange', 
                                     colorListener, true);
        };
    }, [colorRef]);

    return [colorRef, data];
}