react-markdown-typewriter 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -13
- package/dist/components/MarkdownTypewriter.js +1 -1
- package/dist/components/MarkdownTypewriter.mjs +1 -1
- package/dist/components/MarkdownTypewriterAsync.d.mts +9 -0
- package/dist/components/MarkdownTypewriterAsync.d.ts +9 -0
- package/dist/components/MarkdownTypewriterAsync.js +1 -0
- package/dist/components/MarkdownTypewriterAsync.mjs +1 -0
- package/dist/components/TypewriterItem.js +1 -1
- package/dist/components/TypewriterItem.mjs +1 -1
- package/dist/components/index.d.mts +2 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index.mjs +1 -1
- package/dist/functions/markdownComponents.js +1 -1
- package/dist/functions/markdownComponents.mjs +1 -1
- package/dist/functions/typewriterHook.d.mts +16 -0
- package/dist/functions/typewriterHook.d.ts +16 -0
- package/dist/functions/typewriterHook.js +1 -0
- package/dist/functions/typewriterHook.mjs +1 -0
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/dist/index.mjs +1 -1
- package/dist/interfaces/MarkdownTypewriterProps.d.mts +17 -12
- package/dist/interfaces/MarkdownTypewriterProps.d.ts +17 -12
- package/package.json +6 -6
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { HTMLMotionProps, Variants } from 'motion/react';
|
|
2
2
|
import { RefObject } from 'react';
|
|
3
|
-
import { Options } from 'react-markdown';
|
|
3
|
+
import { Options, HooksOptions } from 'react-markdown';
|
|
4
4
|
|
|
5
|
-
interface
|
|
5
|
+
interface TypewriterProps {
|
|
6
6
|
/**
|
|
7
7
|
* The delay in milliseconds between the appearance of one letter and the next.
|
|
8
8
|
* @default 10
|
|
@@ -30,6 +30,15 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
30
30
|
*
|
|
31
31
|
* export default function NarrationScreen() {
|
|
32
32
|
* const paragraphRef = useRef<HTMLDivElement>(null);
|
|
33
|
+
* const scrollToEnd = useCallback((ref: { current: HTMLSpanElement | null }) => {
|
|
34
|
+
* if (paragraphRef.current && ref.current) {
|
|
35
|
+
* let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
|
|
36
|
+
* paragraphRef.current.scrollTo({
|
|
37
|
+
* top: scrollTop,
|
|
38
|
+
* behavior: "auto",
|
|
39
|
+
* });
|
|
40
|
+
* }
|
|
41
|
+
* }, []);
|
|
33
42
|
* return (
|
|
34
43
|
* <div
|
|
35
44
|
* ref={paragraphRef}
|
|
@@ -40,15 +49,7 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
40
49
|
* >
|
|
41
50
|
* <MarkdownTypewriter
|
|
42
51
|
* motionProps={{
|
|
43
|
-
* onCharacterAnimationComplete:
|
|
44
|
-
* if (paragraphRef.current && ref.current) {
|
|
45
|
-
* let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
|
|
46
|
-
* paragraphRef.current.scrollTo({
|
|
47
|
-
* top: scrollTop,
|
|
48
|
-
* behavior: "auto",
|
|
49
|
-
* });
|
|
50
|
-
* }
|
|
51
|
-
* }
|
|
52
|
+
* onCharacterAnimationComplete: scrollToEnd,
|
|
52
53
|
* }}
|
|
53
54
|
* >
|
|
54
55
|
* Hello World
|
|
@@ -61,5 +62,9 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
61
62
|
onCharacterAnimationComplete?: (letterRef: RefObject<HTMLSpanElement | null>) => void;
|
|
62
63
|
};
|
|
63
64
|
}
|
|
65
|
+
interface MarkdownTypewriterProps extends Options, TypewriterProps {
|
|
66
|
+
}
|
|
67
|
+
interface MarkdownTypewriterHooksProps extends HooksOptions, TypewriterProps {
|
|
68
|
+
}
|
|
64
69
|
|
|
65
|
-
export type { MarkdownTypewriterProps as default };
|
|
70
|
+
export type { MarkdownTypewriterHooksProps, MarkdownTypewriterProps as default };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { HTMLMotionProps, Variants } from 'motion/react';
|
|
2
2
|
import { RefObject } from 'react';
|
|
3
|
-
import { Options } from 'react-markdown';
|
|
3
|
+
import { Options, HooksOptions } from 'react-markdown';
|
|
4
4
|
|
|
5
|
-
interface
|
|
5
|
+
interface TypewriterProps {
|
|
6
6
|
/**
|
|
7
7
|
* The delay in milliseconds between the appearance of one letter and the next.
|
|
8
8
|
* @default 10
|
|
@@ -30,6 +30,15 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
30
30
|
*
|
|
31
31
|
* export default function NarrationScreen() {
|
|
32
32
|
* const paragraphRef = useRef<HTMLDivElement>(null);
|
|
33
|
+
* const scrollToEnd = useCallback((ref: { current: HTMLSpanElement | null }) => {
|
|
34
|
+
* if (paragraphRef.current && ref.current) {
|
|
35
|
+
* let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
|
|
36
|
+
* paragraphRef.current.scrollTo({
|
|
37
|
+
* top: scrollTop,
|
|
38
|
+
* behavior: "auto",
|
|
39
|
+
* });
|
|
40
|
+
* }
|
|
41
|
+
* }, []);
|
|
33
42
|
* return (
|
|
34
43
|
* <div
|
|
35
44
|
* ref={paragraphRef}
|
|
@@ -40,15 +49,7 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
40
49
|
* >
|
|
41
50
|
* <MarkdownTypewriter
|
|
42
51
|
* motionProps={{
|
|
43
|
-
* onCharacterAnimationComplete:
|
|
44
|
-
* if (paragraphRef.current && ref.current) {
|
|
45
|
-
* let scrollTop = ref.current.offsetTop - paragraphRef.current.clientHeight / 2;
|
|
46
|
-
* paragraphRef.current.scrollTo({
|
|
47
|
-
* top: scrollTop,
|
|
48
|
-
* behavior: "auto",
|
|
49
|
-
* });
|
|
50
|
-
* }
|
|
51
|
-
* }
|
|
52
|
+
* onCharacterAnimationComplete: scrollToEnd,
|
|
52
53
|
* }}
|
|
53
54
|
* >
|
|
54
55
|
* Hello World
|
|
@@ -61,5 +62,9 @@ interface MarkdownTypewriterProps extends Omit<Options, "components"> {
|
|
|
61
62
|
onCharacterAnimationComplete?: (letterRef: RefObject<HTMLSpanElement | null>) => void;
|
|
62
63
|
};
|
|
63
64
|
}
|
|
65
|
+
interface MarkdownTypewriterProps extends Options, TypewriterProps {
|
|
66
|
+
}
|
|
67
|
+
interface MarkdownTypewriterHooksProps extends HooksOptions, TypewriterProps {
|
|
68
|
+
}
|
|
64
69
|
|
|
65
|
-
export type { MarkdownTypewriterProps as default };
|
|
70
|
+
export type { MarkdownTypewriterHooksProps, MarkdownTypewriterProps as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-markdown-typewriter",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "React Markdown component where Typewriter effect with motion has been added.",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -21,14 +21,14 @@
|
|
|
21
21
|
},
|
|
22
22
|
"homepage": "https://github.com/DRincs-Productions/react-markdown-typewriter",
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"motion": "^12.4
|
|
24
|
+
"motion": "^12.9.4"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"@types/react": "^19.
|
|
28
|
-
"@types/react-dom": "^19.
|
|
27
|
+
"@types/react": "^19.1.2",
|
|
28
|
+
"@types/react-dom": "^19.1.3",
|
|
29
29
|
"html-tags": "^4.0.0",
|
|
30
|
-
"tsup": "^8.
|
|
31
|
-
"typescript": "^5.
|
|
30
|
+
"tsup": "^8.4.0",
|
|
31
|
+
"typescript": "^5.8.3"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"react": ">=18.0.0",
|