react-markdown-typewriter 1.0.0 → 1.0.2

package/dist/interfaces/MarkdownTypewriterProps.d.mts

@@ -2,7 +2,7 @@ import { HTMLMotionProps, Variants } from 'motion/react';
 import { RefObject } from 'react';
 import { Options } from 'react-markdown';
 
-interface MarkdownTypewriterProps extends Omit<Options, "components"> {
+interface MarkdownTypewriterProps extends Options {
     /**
      * The delay in milliseconds between the appearance of one letter and the next.
      * @default 10
@@ -11,7 +11,7 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
     /**
      * The props to pass to the [motion span](https://motion.dev/docs/react-motion-component).
      *
-     * The `letterVariants` parameter has been added to be able to modify the animation of each individual letter
+     * The `characterVariants` parameter has been added to be able to modify the animation of each individual letter
      */
     motionProps?: Omit<HTMLMotionProps<"span">, "variants"> & {
         /**
@@ -19,31 +19,48 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
          *
          * @default { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { opacity: { duration: 0 } } } }
          */
-        letterVariants?: Variants;
+        characterVariants?: Variants;
+        /**
+         * A callback that is called when the animation of a letter is complete.
+         * The callback is called with the reference to the letter.
+         *
+         * @example
+         * ```tsx
+         * import { useRef } from "react";
+         *
+         * 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}
+         *             style={{
+         *                 overflow: "auto",
+         *                 height: "300px",
+         *             }}
+         *         >
+         *             <MarkdownTypewriter
+         *                 motionProps={{
+         *                     onCharacterAnimationComplete: scrollToEnd,
+         *                 }}
+         *             >
+         *                 Hello World
+         *             </MarkdownTypewriter>
+         *         </div>
+         *     );
+         * }
+         * ```
+         */
+        onCharacterAnimationComplete?: (letterRef: RefObject<HTMLSpanElement | null>) => void;
     };
-    /**
-     * The reference to the element that will be scrolled when the text exceeds the height of the container.
-     *
-     * @example
-     * ```tsx
-     * import { useRef } from "react";
-     * import MarkdownTypewriter from "../components/Typewriter";
-     *
-     * export default function NarrationScreen() {
-     *     const paragraphRef = useRef<HTMLDivElement>(null);
-     *     return (
-     *         <div ref={paragraphRef}>
-     *             <MarkdownTypewriter
-     *                 scrollRef={paragraphRef}
-     *             >
-     *                 Hello World
-     *             </MarkdownTypewriter>
-     *         </div>
-     *     );
-     * }
-     * ```
-     */
-    scrollRef?: RefObject<HTMLDivElement | null>;
 }
 
 export type { MarkdownTypewriterProps as default };

package/dist/interfaces/MarkdownTypewriterProps.d.ts

@@ -2,7 +2,7 @@ import { HTMLMotionProps, Variants } from 'motion/react';
 import { RefObject } from 'react';
 import { Options } from 'react-markdown';
 
-interface MarkdownTypewriterProps extends Omit<Options, "components"> {
+interface MarkdownTypewriterProps extends Options {
     /**
      * The delay in milliseconds between the appearance of one letter and the next.
      * @default 10
@@ -11,7 +11,7 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
     /**
      * The props to pass to the [motion span](https://motion.dev/docs/react-motion-component).
      *
-     * The `letterVariants` parameter has been added to be able to modify the animation of each individual letter
+     * The `characterVariants` parameter has been added to be able to modify the animation of each individual letter
      */
     motionProps?: Omit<HTMLMotionProps<"span">, "variants"> & {
         /**
@@ -19,31 +19,48 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
          *
          * @default { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { opacity: { duration: 0 } } } }
          */
-        letterVariants?: Variants;
+        characterVariants?: Variants;
+        /**
+         * A callback that is called when the animation of a letter is complete.
+         * The callback is called with the reference to the letter.
+         *
+         * @example
+         * ```tsx
+         * import { useRef } from "react";
+         *
+         * 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}
+         *             style={{
+         *                 overflow: "auto",
+         *                 height: "300px",
+         *             }}
+         *         >
+         *             <MarkdownTypewriter
+         *                 motionProps={{
+         *                     onCharacterAnimationComplete: scrollToEnd,
+         *                 }}
+         *             >
+         *                 Hello World
+         *             </MarkdownTypewriter>
+         *         </div>
+         *     );
+         * }
+         * ```
+         */
+        onCharacterAnimationComplete?: (letterRef: RefObject<HTMLSpanElement | null>) => void;
     };
-    /**
-     * The reference to the element that will be scrolled when the text exceeds the height of the container.
-     *
-     * @example
-     * ```tsx
-     * import { useRef } from "react";
-     * import MarkdownTypewriter from "../components/Typewriter";
-     *
-     * export default function NarrationScreen() {
-     *     const paragraphRef = useRef<HTMLDivElement>(null);
-     *     return (
-     *         <div ref={paragraphRef}>
-     *             <MarkdownTypewriter
-     *                 scrollRef={paragraphRef}
-     *             >
-     *                 Hello World
-     *             </MarkdownTypewriter>
-     *         </div>
-     *     );
-     * }
-     * ```
-     */
-    scrollRef?: RefObject<HTMLDivElement | null>;
 }
 
 export type { MarkdownTypewriterProps as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-markdown-typewriter",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Markdown component where Typewriter effect with motion has been added.",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",