react-component-typed-terminal v1.1.0

react-component-typed-terminal

A react component for displaying a typing animation using TypedJs to display a terminal like component to display the strings.

You can interact with the component on the following storybook site here.

Installation

yarn add react-component-typed-terminal

Usage

You can import and use the component in your react app.

import React from "react";
import { TypedTerminal } from "react-component-typed-terminal";

const typedJsProps = {
    loop: false,
    typeSpeed: 40,
    showCursor: false,
}

const terminalData = [
    {
      command: "ls -a ./folder-1",
      results: ["file 1", "file 2", "file 3", "file 4"],
    },
    {
      command: "ls -a ./folder-2",
      results: ["file 1", "file 2", "file 3", "file 4"],
    },
]

const App = () => {
    return <TypedTerminal typedJsProps={typedJsProps} terminalData={terminalData}>
}

The following parameters are available for the TypedTerminal component.

You can also see the parameters in use in the storybook site here.

The following parameters are available for the TerminalLine component.

You can also see the parameters in use in the storybook site here.

Local development with storybook

This repo includes storybook to allow the component to be loaded locally and to view code changes as you make them to the local files.

yarn storybook

Once the server is running the storybook will be available at localhost:8080.