react-markdown-typewriter 1.0.1 → 1.0.2

package/README.md

@@ -2,7 +2,7 @@
 
 This library provides a new component, `MarkdownTypewriter`, that combines the Markdown component of [react-markdown](https://www.npmjs.com/package/react-markdown) with the animation of typewriter. The animation was created entirely with [motion](https://www.npmjs.com/package/motion).
 
-Live demo: https://codesandbox.io/p/sandbox/react-markdown-typewriter-rgjf6t
+Live demo: <https://codesandbox.io/p/sandbox/react-markdown-typewriter-rgjf6t>
 
 ## Why?
 
@@ -25,7 +25,7 @@ The component accepts all the props of the `react-markdown` component and adds s
 This is a very simple example of how to use the component:
 
 ```tsx
-import MarkdownTypewriter from "../components/Typewriter";
+import { MarkdownTypewriter } from "react-markdown-typewriter";
 
 export default function NarrationScreen() {
     return (
@@ -42,10 +42,19 @@ This is a more complex example:
 import { useRef } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import MarkdownTypewriter from "../components/Typewriter";
+import { MarkdownTypewriter } from "react-markdown-typewriter";
 
 export default function NarrationScreen() {
     const paragraphRef = useRef<HTMLDivElement>(null);
+    const scrollToEnd = useCallback((ref: { current: HTMLSpanElement | null }) => {
+        if (paragraphRef.current && ref.current) {
+            let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
+            paragraphRef.current.scrollTo({
+                top: scrollTop,
+                behavior: "auto",
+            });
+        }
+    }, []);
     return (
         <div ref={paragraphRef}>
             <MarkdownTypewriter
@@ -60,15 +69,7 @@ export default function NarrationScreen() {
                         hidden: { opacity: 0 },
                         visible: { opacity: 1, transition: { opacity: { duration: 0 } } },
                     },
-                    onCharacterAnimationComplete: (ref) => {
-                        if (paragraphRef.current && ref.current) {
-                            let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
-                            paragraphRef.current.scrollTo({
-                                top: scrollTop,
-                                behavior: "auto",
-                            });
-                        }
-                    },
+                    onCharacterAnimationComplete: scrollToEnd,
                 }}
             >
                 Hello World