From df57ebd92be987f6cdc414fb479850b7fe48c150 Mon Sep 17 00:00:00 2001 From: Kelvin Esegbona Date: Wed, 28 Jul 2021 17:14:05 +0100 Subject: [PATCH 1/4] update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index dfae7a6..5ea88f2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-typewriter-effect", - "version": "1.0.2", + "version": "1.1.0", "description": "creating a typewriter effect using react", "main": "dist/index.js", "scripts": { From 000992ca96b1918cd7666934154ab47479db51da Mon Sep 17 00:00:00 2001 From: Esegbona Kelvin <45713801+kevoese@users.noreply.github.com> Date: Sun, 13 Feb 2022 07:53:27 +0100 Subject: [PATCH 2/4] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 621d896..f3b7a02 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,8 @@ import TypeWriterEffect from 'react-typewriter-effect'; - multiTextDelay (must be a number): delay before each text is erased in multi text display in milli seconds. +- multiTextLoop creates a continous loop of the typewriter text + - typeSpeed (must be a number): Speed of typing in milli seconds, - startDelay (must be a number): Delay before animation starts in milli seconds From f8baf3310eaa5079cea1c228b48ff66203d0fa1a Mon Sep 17 00:00:00 2001 From: Esegbona Kelvin <45713801+kevoese@users.noreply.github.com> Date: Wed, 22 Jun 2022 10:02:15 +0100 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f3b7a02..87972e6 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,7 @@ import TypeWriterEffect from 'react-typewriter-effect'; - multiTextDelay (must be a number): delay before each text is erased in multi text display in milli seconds. -- multiTextLoop creates a continous loop of the typewriter text +- multiTextLoop creates a continous loop of the typewriter text (true/false) - typeSpeed (must be a number): Speed of typing in milli seconds, From 6026c9acee5594744f44cbd7b05994d9a5100d6f Mon Sep 17 00:00:00 2001 From: Michael Oryl Date: Tue, 16 May 2023 14:05:17 -0400 Subject: [PATCH 4/4] Added elementType prop to component to override the default H1 that wraps the text displayed with the typewriter effect --- README.md | 16 +++++++++------- src/index.js | 21 +++++++++++---------- src/utils.js | 6 ++++++ 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 87972e6..50fdab4 100644 --- a/README.md +++ b/README.md @@ -87,21 +87,23 @@ import TypeWriterEffect from 'react-typewriter-effect'; - text (must be a string): Required in sigle text display mode. The text in string. -- multiText (array of string): Required in multi text mode +- multiText (array of string): Required in multi text mode. -- multiTextDelay (must be a number): delay before each text is erased in multi text display in milli seconds. +- multiTextDelay (must be a number): delay before each text is erased in multi text display in milliseconds. -- multiTextLoop creates a continous loop of the typewriter text (true/false) +- multiTextLoop creates a continous loop of the typewriter text (true/false). -- typeSpeed (must be a number): Speed of typing in milli seconds, +- typeSpeed (must be a number): Speed of typing in milliseconds. -- startDelay (must be a number): Delay before animation starts in milli seconds +- startDelay (must be a number): Delay before animation starts in milliseconds. - hideCursorAfterText (a boolean): it removes cursor after typing. -- cursorColor (must be a string): color of the cursor +- cursorColor (must be a string): color of the cursor. + +- elementType (a string or a React component): the element/component that will be wrapped around the typewriter-effect text. Defaults to H1. - textStyle (must be an object): custom css styles can be applied to the text in this object. -- scrollArea (must be a dom element): the scrollable area. By default it is document +- scrollArea (must be a dom element): the scrollable area. By default it is the document. diff --git a/src/index.js b/src/index.js index 8b31a66..e5e5ae9 100644 --- a/src/index.js +++ b/src/index.js @@ -4,16 +4,17 @@ import './app.css'; class TypeWriterEffect extends Component { state = { - text: '', + animate: false, blink: false, + element: this.props.elementType || 'h1', + eraseSpeedDelay: null, hideCursor: true, - animate: false, - typeSpeedDelay: null, multiTextDelay: null, - eraseSpeedDelay: null, - startDelay: null, - scrollAreaIsSet: null, multiTextLoop: false, + scrollAreaIsSet: null, + startDelay: null, + text: '', + typeSpeedDelay: null, }; myRef = createRef(); @@ -135,18 +136,18 @@ class TypeWriterEffect extends Component { render() { return (
-

{this.state.text} -
-

+ > +
); } diff --git a/src/utils.js b/src/utils.js index 8220596..bb1e26a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -76,6 +76,12 @@ export const propTypeValidation = { `Invalid ${propName} supplied to react-typeWriter component!` ); }, + elementType: (props, propName) => { + if (props[propName] && typeof props[propName] != 'string' && typeof props[propName] != 'function') + return new Error( + `Invalid ${propName} supplied to react-typeWriter component!` + ); + }, textStyle: (props, propName) => { if (props[propName] && typeof props[propName] != 'object') return new Error(