diff --git a/README.md b/README.md index 537fb25..21a8949 100644 --- a/README.md +++ b/README.md @@ -43,22 +43,34 @@ blink. To include it, you must include [`dist/Typist.css`](https://github.com/jstejada/react-typist/blob/69445a87314b52454f050045961ac32090739726/dist/Typist.css) in your build. ## Dynamic content usage -Provide a unique `key` prop to `Typist` so that it would re-render every time your dynamic content is changed like that: -``` + +You can use the `onTypingDone` method to loop through an array of dynamic text values. +The example below cycles through three strings with delays to create a dynamic typing effect. + +```jsx import React, { useState } from "react"; import Typist from "react-typist"; -export default const DynamicTypist = () => { - const texts = ["first text", "second text", "third text"]; +export default function DynamicTextExample() { + const texts = ["one", "two", "three"]; const [currentTextCounter, setCurrentTextCounter] = useState(0); - return
if (currentTextCounter < texts.length - 1) { setCurrentTextCounter(currentTextCounter + 1) }}> - + return ( + { + if (currentTextCounter < texts.length - 1) { + setCurrentTextCounter(currentTextCounter + 1); + } else { + setCurrentTextCounter(0); + } + }} + > {texts[currentTextCounter]} -
+ ); } -``` + Otherwise your dynamic content **won't** be reflected and re-typed.