Widgets - React, React Hooks

👉Demo👈

Due to Google Translation API not being free the API only runs on networks running on HTTPS (localhost:3000) 😞.
I have included images of the Google translation widget bellow attached to the read me.

What is this project? 🤔

A project creating custom hooks that can be reused, each widget gradually implements more hooks. The hooks used in this project are: useState, useEffect and useRef.

useEffect - learnt how to use "lifecycle" type methods in an function component, knowing the syntax of clean up function and the second arguments that are passed in e.g. useEffect(() => { ... }, []) or useEffect(() => { ... }, [data]).
useState - learnt how to use states in a function component.
useRef - understand how to access DOM Nodes/React Elements using useRef, and where I should be updating the useRef inside the component i.e. only update useRef inside a useEffect or useEffectLayout or inside an event handler.
React.Fragment - I used the React Fragment to return a list without adding extra nodes to the DOM, I passed the key for the list inside the React Fragment to avoid rendering an additional <div></div> tag.
Google Translate API - understanding how to connect the application with the translation API thorugh axios.post().
Wikipedia API - understanding how to connect the application with the wiki API thorugh axios.get().