Added github gist and codesandbox to useToggle, changed minor types in useDebounce, useHover, useOnScreen hooks

Author: nikasepiskveradze

src/pages/useDebounce.md

@@ -107,7 +107,7 @@ function useDebounce(value, delay) {
 }
 ```
 
-```typescript jsx
+```typescript
 import { useState, useEffect, useRef } from "react";
 
 // Usage

src/pages/useHover.md

@@ -64,7 +64,7 @@ function App() {
 // Hook
 // T - could be any type of HTML element like: HTMLDivElement, HTMLParagraphElement and etc.
 // hook returns tuple(array) with type [any, boolean]
-function useHover<T>(): [any, boolean] {
+function useHover<T>(): [MutableRefObject<T>, boolean] {
   const [value, setValue] = useState<boolean>(false); 
 
   const ref: any = useRef<T | null>(null);

src/pages/useOnScreen.md

@@ -81,7 +81,7 @@ function useOnScreen(ref, rootMargin = "0px") {
 ```
 
 ```typescript
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, MutableRefObject  } from "react";
 
 // Usage
 function App() {
@@ -90,7 +90,7 @@ function App() {
   // Call the hook passing in ref and root margin
   // In this case it would only be considered onScreen if more ...
   // ... than 300px of element is visible.
-  const onScreen: boolean = useOnScreen(ref, "-300px");
+  const onScreen: boolean = useOnScreen<HTMLDivElement>(ref, "-300px");
 
   return (
     <div>
@@ -118,7 +118,7 @@ function App() {
 }
 
 // Hook
-function useOnScreen(ref: any, rootMargin: string = "0px"): boolean {
+function useOnScreen<T extends Element>(ref: MutableRefObject<T>, rootMargin: string = "0px"): boolean {
   // State and setter for storing whether element is visible
   const [isIntersecting, setIntersecting] = useState<boolean>(false);
 

src/pages/useToggle.md

@@ -2,8 +2,8 @@
 templateKey: post
 title: useToggle
 date: "2020-12-02"
-gist: 
-sandbox: 
+gist: https://gist.github.com/nikasepiskveradze/9db51bc37e1c87974528b7bc47b5268c
+sandbox: https://codesandbox.io/s/recursing-cori-ckw8p
 isMultilingual: true
 ---