React Code Auto Typing

React Code Auto Typing is a React component for automatic code writing animation with highlighting included. Under the hood it uses react-typist and react-syntax-highlighter.

Check out a working demo here.

Install

npm install --save react-code-auto-typing

Usage

import CodeAutoTyping from "react-code-auto-typing";

const snippet = `function greet(name) {
  return 'Hello ' + name;
}

console.log(greet('John'));`;

export default function Example() {
  return (
    <CodeAutoTyping language="javascript">
      {snippet}
    </CodeAutoTyping>
  );
}

Note: you can use \n and \t to give format to the code if you prefer.

Style

To give a specific style to the highlighting, import one of the provided by the react-syntax-highlighter library.

import CodeAutoTyping from "react-code-auto-typing";
import { ocean } from "react-syntax-highlighter/dist/esm/styles/hljs";

const snippet = "console.log('Hello World');";

export default function Example() {
  return (
    <CodeAutoTyping
      language="javascript"
      syntaxHighlighterProps={{ style: ocean }}
    >
      {snippet}
    </CodeAutoTyping>
  );
}

Props

This component is basically a wrapper for react-typist and react-syntax-highlighter, so all props are forwarded to the corresponding library component.

Prop name	Type	Description
children	string	The code to highlight and animate
language	string	The language of the code
syntaxHighlighterProps	SyntaxHighlighterProps	Props forwarded to the SyntaxHighlighter component
spread props	TypistProps	Props forwarded to the Typist component

For more detail on the props of each library, visit the corresponding documentation:

• Typist props
• Syntax Highlighter props

License

MIT