docs(examples): Updated codesandbox examples for hooks (#488)

imbhargav5 · May 17, 2021 · 74d85be · 74d85be
1 parent 5576272
commit 74d85be
Show file tree

Hide file tree

Showing 37 changed files with 339 additions and 6 deletions.
diff --git a/docs/useBoundingclientrect.md b/docs/useBoundingclientrect.md
@@ -90,6 +90,17 @@ render(<Demo/>)
 | value        | DOMRect | DOMRect Object containing x,y, width, height, left,right,top and bottom keys | null          |
 
 
+## Codesandbox Example
+
+### BAsic Usage
+
+<iframe src="https://codesandbox.io/embed/useboundingclientrect-7zbcd?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useBoundingclientrect"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.
 
diff --git a/docs/useBoundingclientrectRef.md b/docs/useBoundingclientrectRef.md
@@ -88,6 +88,17 @@ N/A
 | update       | Function     | Function that can be called at any time to force a recalculation of the clientrect | null          |
 
 
+## Codesandbox Example
+
+### Basic Usage
+
+<iframe src="https://codesandbox.io/embed/useboundingclientrectref-kqc8y?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useBoundingclientrectRef"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.
 
diff --git a/docs/useDocumentEventListener.md b/docs/useDocumentEventListener.md
@@ -43,6 +43,12 @@ render(<Demo/>)
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/usedocumenteventlistener-ebpcc?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useDocumentEventListener"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+>
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useEffectOnceWhen.md b/docs/useEffectOnceWhen.md
@@ -44,6 +44,12 @@ render(<Demo/>)
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/useeffectoncewhen-io8wo?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useEffectOnceWhen"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useForkRef.md b/docs/useForkRef.md
@@ -80,6 +80,16 @@ render(<Demo/>)
 
 [Source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/utils/useForkRef.js)
 
+## Codesandbox Example
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/useforkref-ptmok?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useForkRef"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useFreshTick.md b/docs/useFreshTick.md
@@ -53,7 +53,12 @@ render(<Demo />);
 
 ### Basic Usage    
 
-
+<iframe src="https://codesandbox.io/embed/usefreshtick-vi4d5?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useFreshTick"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useFullscreen.md b/docs/useFullscreen.md
@@ -191,7 +191,16 @@ function Demo() {
 
 render(<Demo/>)
 ```
+## Codesandbox Example
 
+###  Basic usage
+
+<iframe src="https://codesandbox.io/embed/usefullscreen-jqnzu?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useFullscreen"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useGeolocation.md b/docs/useGeolocation.md
@@ -76,6 +76,17 @@ render(<App />);
 ```
 
 
+## Codesandbox Example
+
+### Basic Usage
+
+<iframe src="https://codesandbox.io/embed/usegeolocation-r1lm7?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useGeolocation"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.
 
diff --git a/docs/useInViewRef.md b/docs/useInViewRef.md
@@ -91,7 +91,7 @@ Returns an array with the first element in the array being the callback ref for
         borderRadius: 4,
         overflow: "hidden"
     }}
-     title="use-counter"
+     title="useInViewRef"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
 />

diff --git a/docs/useInput.md b/docs/useInput.md
@@ -80,6 +80,17 @@ render(<Demo/>)
 | ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------- |
 | {value, onChange} | Object | Object containing {value : "String", onChange: "function that accepts an event and updates the value of the string"} |
 
+## Codesandbox Examples
+
+### Basic Usage
+
+<iframe 
+    src="https://codesandbox.io/embed/useinput-forked-oxzxj?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="useInput"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useIntersectionObserverRef.md b/docs/useIntersectionObserverRef.md
@@ -69,6 +69,18 @@ Returns an array with the first element in the array being the callback ref for
 | ref          | CallbackRef | ref for the React component/element that needs to be observed. | null          |
 
 
+## Codesandbox Example
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/useintersectionobserverref-gm6j6?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useIntersectionObserverRef"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
+
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.
 
diff --git a/docs/useInterval.md b/docs/useInterval.md
@@ -72,6 +72,17 @@ render(<Demo/>)
 | stop                       | function   | Stop the interval          |
 | intervalId                 | intervalId | IntervalId of the interval |
 
+## Codesandbox Example
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/useinterval-h6ctw?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useInterval"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useIntervalWhen.md b/docs/useIntervalWhen.md
@@ -43,6 +43,13 @@ render(<Demo/>)
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/useintervalwhen-lej6t?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useIntervalWhen"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useIsomorphicEffect.md b/docs/useIsomorphicEffect.md
@@ -43,7 +43,12 @@ render(<Demo/>)
 
 ### Basic Usage    
 
-
+<iframe src="https://codesandbox.io/embed/useisomorphiceffect-kn02d?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useIsomorphicEffect"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useLocalstorage.md b/docs/useLocalstorage.md
@@ -40,7 +40,15 @@ function Demo() {
 
 render(<Demo />);
 ```
-
+## Codesandbox Example
+### Basic Usage
+
+<iframe src="https://codesandbox.io/embed/usevisibilitysensor-ej29y?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useVisibilitySensor"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useLocalstorageState.md b/docs/useLocalstorageState.md
@@ -41,6 +41,12 @@ render(<Demo/>)
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/uselocalstoragestate-kr16j?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useLocalstorageState"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useMediaMatch.md b/docs/useMediaMatch.md
@@ -41,6 +41,12 @@ render(<Demo />);
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/usemediamatch-f616x?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useMediaMatch"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useMergeRefs.md b/docs/useMergeRefs.md
@@ -41,6 +41,13 @@ render(<Demo/>)
 
 ### Basic Usage    
 
+<iframe src="https://codesandbox.io/embed/usemergerefs-rk7m1?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useMergeRefs"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 
 
 ## Join Bhargav's discord server

diff --git a/docs/useMutationObserver.md b/docs/useMutationObserver.md
@@ -87,6 +87,17 @@ render(<Demo/>)
 | callback | function  | Function which should be invoked on mutation. It is called with the `mutationList` and `observer` | undefined                                                               |
 | config   | object    | Mutation Observer configuration                                                                   | {attributes: true,,characterData: true,,subtree: true,,childList: true} |
 
+### Codesandbox Example
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/usemutationobserver-mj489?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useMutationObserver"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useNavigatorLanguage.md b/docs/useNavigatorLanguage.md
@@ -36,6 +36,17 @@ render(<Demo />);
 A language (String) is returned.
 
 
+### Codesandbox Example
+
+## Basic Usage
+
+<iframe src="https://codesandbox.io/embed/usenavigatorlanguage-pnk7f?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useNavigatorLanguage"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.
 
diff --git a/docs/useOnWindowScroll.md b/docs/useOnWindowScroll.md
@@ -42,6 +42,16 @@ render(<Demo/>)
 
 ### A React hook for adding an event listener for window scroll
 
+## Codesandbox Example
+
+### Basic Usage 
+
+<iframe src="https://codesandbox.io/embed/useonwindowscroll-58uiy?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useOnWindowScroll"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useOnline.md b/docs/useOnline.md
@@ -35,6 +35,16 @@ render(<Demo />);
 
 Offline status (boolean) is returned.
 
+## Codesandbox Example
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/useonline-tiqdb?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useOnline"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useOutsideClick.md b/docs/useOutsideClick.md
@@ -39,6 +39,17 @@ function Demo() {
 render(<Demo />);
 ```
 
+### Codesandbox Example
+
+## Basic usage
+
+<iframe src="https://codesandbox.io/embed/usenavigatorlanguage-pnk7f?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useNavigatorLanguage"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/ >
+
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/useOutsideClickRef.md b/docs/useOutsideClickRef.md
@@ -38,6 +38,16 @@ function Demo() {
 render(<Demo/>)
 ```
 
+## Codesandbox Examples
+
+### Basic usage
+
+<iframe src="https://codesandbox.io/embed/useoutsideclickref-q76i8?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="useOutsideClickRef"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.

diff --git a/docs/usePrevious.md b/docs/usePrevious.md
@@ -55,6 +55,17 @@ render(<Demo />);
 
 [![Image from Gyazo](https://i.gyazo.com/9913f58e1959ed60fb590cb280639d88.gif)](https://gyazo.com/9913f58e1959ed60fb590cb280639d88)
 
+## Codesandbox Example
+
+## Basic Usage
+
+<iframe src="https://codesandbox.io/embed/useprevious-uhjyr?fontsize=14&hidenavigation=1&theme=dark"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+title="usePrevious"
+allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+/>
+
 
 ## Join Bhargav's discord server
 You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.