\n );\n}\n```\n\nhttps://user-images.githubusercontent.com/69443738/137083086-da4e8123-7371-49c1-b856-07cf21f9854f.mp4\n\n### Custom cursor typewriter\n\n```jsx\nimport * as React from \"react\";\nimport { useTypewriter } from \"../useTypewriter\";\nimport \"./custom.css\";\n\nconst CustomCursorTypewriter: React.FC = ({}) => {\n const targetText =\n \"Welcome to React Typewriter. This is a typewriter with custom cursor (color).\";\n const { textValue: typedText, wrapperClassName } = useTypewriter({\n targetText: targetText,\n autoStartDelay: 0,\n typingDelayMillis: 50,\n });\n return (\n // Have to compose classNames to get all the css rules\n \n {typedText}\n \n );\n};\n\nexport default CustomCursorTypewriter;\n\nfunction App() {\n return (\n
\n
\n \n
\n
\n );\n}\n```\n\nhttps://user-images.githubusercontent.com/69443738/137083003-7ee00bcc-7df3-4bd1-b482-b76adeec1ee5.mp4\n\n### Custom typewriter with highlight and colored text\n\n```jsx\nimport * as React from \"react\";\nimport { useTypewriter } from \"../useTypewriter\";\nimport \"./custom.css\";\n\nconst CustomTypewriter: React.FC = () => {\n const targetText =\n \"Welcome to React Typewriter. This is a custom typewriter, you can highlight different words.\";\n\n const { textValue: typedText, wrapperClassName } = useTypewriter({\n targetText: targetText,\n autoStartDelay: 0,\n typingDelayMillis: 50,\n });\n\n /**\n * You can select as many words or phrases as you like to highlight/customize their color/bold\n * Here as an example, we select one phrase and one word to customize\n */\n const stringToSearch = \"React Typewriter\";\n const stringToSearch2 = \"highlight\";\n\n const startIndex1 = targetText.indexOf(stringToSearch);\n const endIndex1 = startIndex1 + stringToSearch.length;\n const startIndex2 = targetText.indexOf(stringToSearch2);\n const endIndex2 = startIndex2 + stringToSearch2.length;\n\n const fragments = splitTargetText(\n typedText,\n startIndex1,\n endIndex1,\n startIndex2,\n endIndex2\n );\n\n return (\n
\n
\n {fragments}\n
\n
\n );\n};\n\nconst splitTargetText = (\n str: string,\n startIndex1: number,\n endIndex1: number,\n startIndex2: number,\n endIndex2: number\n): React.ReactNode[] => {\n /**\n * Return everything from 0...startIndex of str as a string,\n * return evevertying from startindex to endindex as a bolded span\n * return everything from endindex to str.length as a string\n */\n return [\n str.slice(0, startIndex1),\n \n {str.slice(startIndex1, endIndex1)}\n ,\n str.slice(endIndex1, startIndex2),\n {str.slice(startIndex2, endIndex2)},\n str.slice(endIndex2, str.length),\n ];\n};\n\nexport default CustomTypewriter;\n\nfunction App() {\n return (\n
\n
\n \n
\n
\n );\n}\n```\n\nhttps://user-images.githubusercontent.com/69443738/137082907-6c6c411d-e90a-482d-ab92-080764b02d5c.mp4\n\n### Typewriter with looping effect\n\n```jsx\nimport * as React from \"react\";\nimport { useTypewriter } from \"../useTypewriter\";\nimport \"./custom.css\";\n\ninterface Props {}\n\nconst TypewriterWithLoop: React.FC = ({}) => {\n const targetText =\n \"Welcome to React Typewriter. This is a typewriter with looping effect.\";\n const { textValue: typedText, wrapperClassName } = useTypewriter({\n targetText: targetText,\n autoStartDelay: 0,\n typingDelayMillis: 50,\n loop: true,\n });\n return