onFrame and readme

README.md

@@ -46,7 +46,7 @@ export const App = () => {
 };
 ```
 
-### Props
+## Props
 
 | Property   | type     | default  | range | description                                                                                |
 | ---------- | -------- | -------- | ----- | ------------------------------------------------------------------------------------------ |
@@ -59,11 +59,10 @@ export const App = () => {
 | range      | number[] | [65,125] |       | Unicode characters range to select random characters from                                  |
 | overdrive  | number   | 95       | 0-∞   | Use this unicode character for overdrive mode                                              |
 | overflow   | boolean  | true     |       | Set to false to always restart the animation from an empty string                          |
-| onComplete | function | -        |       | callback invoked on completion                                                             |
+| onFrame    | function | -        |       | callback invoked on every rerender                                                         |
+| onComplete | function | -        |       | callback invoked on animation end                                                          |
 
-<!-- The controller will move forward along the text input and scramble more characters, at a pace of `tick` frames.   -->
-
-## Unicode
+## Unicode Values
 
 | Glyph  | Unicode | Description            |
 | ------ | ------- | ---------------------- |

package.json

@@ -4,6 +4,7 @@
   "keywords": [
     "typescript",
     "react",
+    "hook",
     "animation",
     "scramble",
     "typewriter",
@@ -12,7 +13,7 @@
     "randomizer",
     "yugop"
   ],
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "module": "dist/use-scramble.esm.js",
   "main": "dist/index.js",

playground/App.tsx

@@ -34,6 +34,12 @@ export const App = () => {
     seed: params.seed,
     overflow: params.overflow,
     overdrive: params.overdrive ? 95 : false,
+    onFrame: result => {
+      console.log(result);
+    },
+    onComplete: () => {
+      console.log('complete');
+    },
   });
 
   useControls(

src/index.tsx

@@ -82,6 +82,11 @@ export type UseScrambleProps = {
    * onComplete callback
    */
   onComplete?: Function;
+
+  /**
+   * onFrame callback
+   */
+  onFrame?: (result: string) => void;
 };
 
 export const useScramble = (props: UseScrambleProps) => {
@@ -95,6 +100,7 @@ export const useScramble = (props: UseScrambleProps) => {
     overflow = true,
     range = [65, 125],
     overdrive = 95,
+    onFrame,
     onComplete,
   } = props;
 
@@ -283,8 +289,13 @@ export const useScramble = (props: UseScrambleProps) => {
       }
     }
 
+    // set text
     nodeRef.current.innerHTML = result;
 
+    if (onFrame) {
+      onFrame(result);
+    }
+
     /**
      * Exit if the result is equal to the input
      *
@@ -330,14 +341,9 @@ export const useScramble = (props: UseScrambleProps) => {
   /**
    * reset scramble when text input is changed
    */
-  useEffect(() => {
-    nodeRef.current.ariaLabel = text;
-    reset();
-  }, [text]);
-
   useEffect(() => {
     play();
-  }, [overdrive]);
+  }, [text, overdrive]);
 
   /**
    * start or stop animation when text and speed change

tsconfig.json

@@ -17,7 +17,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     // use Node's module resolution algorithm, instead of the legacy TS one
     "moduleResolution": "node",
@@ -30,6 +30,6 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
-    "noEmit": true,
+    "noEmit": true
   }
 }