1.0.0 & Update react peer dependency & Update README

Author: 7PH

README.md

@@ -35,10 +35,10 @@ This React library is a wrapper around [PowerGlitch](https://github.com/7PH/powe
 In order to glitch something, call `useGlitch()` and store its result in a variable.
 ```jsx
 function App() {
-    const glitched = useGlitch();
+    const glitch = useGlitch();
 
     return (
-        <h1>react-powerglitch <span ref={glitched.ref}>🌎</span></h1>
+        <h1>react-powerglitch <span ref={glitch.ref}>🌎</span></h1>
     );
 }
 ```
@@ -48,7 +48,7 @@ One limitation due to React internals is to never place a glitched element as th
 <>
     {/* Do NOT do this */}
     {condition &&
-        <span ref={glitched.ref}>🌎</span>
+        <span ref={glitch.ref}>🌎</span>
     }
 </>
 ```
@@ -58,7 +58,7 @@ Instead, wrap the glitched element with a container:
 <>
     {condition &&
         <div>
-            <span ref={glitched.ref}>🌎</span>
+            <span ref={glitch.ref}>🌎</span>
         </div>
     }
 </>
@@ -69,10 +69,10 @@ Instead, wrap the glitched element with a container:
 You can pass options to customize the glitch effect to `useGlitch`:
 ```jsx
 function App() {
-    const glitched = useGlitch({ glitchTimeSpan: false });
+    const glitch = useGlitch({ glitchTimeSpan: false });
 
     return (
-        <h1>react-powerglitch <span ref={glitched.ref}>🌎</span></h1>
+        <h1>react-powerglitch <span ref={glitch.ref}>🌎</span></h1>
     );
 }
 ```
@@ -91,17 +91,17 @@ The `useGlitch` hook returns an object containing:
 Here is an example:
 ```jsx
 function App() {
-    const glitched = useGlitch({ glitchTimeSpan: false });
+    const glitch = useGlitch({ glitchTimeSpan: false });
 
     return (
         <>
             <div>
-                <h1 ref={glitched.ref}>react-powerglitch 🌎</h1>
+                <h1 ref={glitch.ref}>react-powerglitch 🌎</h1>
             </div>
-            <button onClick={glitched.startGlitch}>
+            <button onClick={glitch.startGlitch}>
                 Start
             </button>
-            <button onClick={glitched.stopGlitch}>
+            <button onClick={glitch.stopGlitch}>
                 Stop
             </button>
         </>
@@ -119,17 +119,17 @@ Your IDE should automatically identify the return type of `useGlitch` to be `Gli
 import { useGlitch, GlitchHandle } from 'react-powerglitch';
 
 function App() {
-    const glitched: GlitchHandle = useGlitch({ glitchTimeSpan: false });
+    const glitch: GlitchHandle = useGlitch({ glitchTimeSpan: false });
 
     return (
         <>
             <div>
-                <h1 ref={glitched.ref}>react-powerglitch 🌎</h1>
+                <h1 ref={glitch.ref}>react-powerglitch 🌎</h1>
             </div>
-            <button onClick={glitched.startGlitch}>
+            <button onClick={glitch.startGlitch}>
                 Start
             </button>
-            <button onClick={glitched.stopGlitch}>
+            <button onClick={glitch.stopGlitch}>
                 Stop
             </button>
         </>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-powerglitch",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "types": "./types/lib/index.d.ts",
   "main": "./lib/react-powerglitch.umd.js",
   "module": "./lib/react-powerglitch.es.js",
@@ -23,8 +23,8 @@
     "powerglitch": "^2.2.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">= 16.8.0",
+    "react-dom": ">= 16.8.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.17",
@@ -34,6 +34,8 @@
     "@vitejs/plugin-react": "^2.1.0",
     "eslint": "^8.23.1",
     "eslint-plugin-react": "^7.31.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.0"
   }

package.json

@@ -1,23 +1,22 @@
 import React, { useState } from 'react';
 import { GlitchHandle, useGlitch } from '../lib/';
-import './App.css';
 
 
 function App() {
-    const glitched: GlitchHandle = useGlitch({ hideOverflow: true, glitchTimeSpan: { start: 0, end: 1 } });
+    const glitch: GlitchHandle = useGlitch({ hideOverflow: true, glitchTimeSpan: { start: 0, end: 1 } });
     const [show, setShow] = useState(true);
 
     return (
         <>
             {show &&
                 <div>
-                    <h1 ref={glitched.ref}>react-powerglitch 🌎</h1>
+                    <h1 ref={glitch.ref}>react-powerglitch 🌎</h1>
                 </div>
             }
-            <button onClick={glitched.startGlitch}>
+            <button onClick={glitch.startGlitch}>
                 Start
             </button>
-            <button onClick={glitched.stopGlitch}>
+            <button onClick={glitch.stopGlitch}>
                 Stop
             </button>
             <button onClick={() => setShow(! show)}>

src/docs/App.css

@@ -15,6 +15,13 @@
     -webkit-text-size-adjust: 100%;
 }
 
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    text-align: center;
+}
+
 body {
     margin: 0;
     display: flex;