https://github.com/ormesam/blazor-typewriter

A simple typewriter effect library for Blazor applications
https://github.com/ormesam/blazor-typewriter

blazor typewriter typewriter-effect

Last synced: about 2 months ago
JSON representation

A simple typewriter effect library for Blazor applications

• Host: GitHub
• URL: https://github.com/ormesam/blazor-typewriter
• Owner: ormesam
• License: mit
• Created: 2020-08-31T17:49:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-02-19T14:33:52.000Z (almost 3 years ago)
• Last Synced: 2024-08-04T01:08:49.029Z (5 months ago)
• Topics: blazor, typewriter, typewriter-effect
• Language: C#
• Homepage:
• Size: 118 KB
• Stars: 20
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - BlazorTypewriter -  A typewriter effect for Blazor. (Libraries & Extensions / 2D/3D Rendering engines)

README

        
# Blazor Typewriter

A simple typewriter effect library for Blazor applications

## Installation

![Nuget](https://img.shields.io/nuget/v/BlazorTypewriter) ![Nuget](https://img.shields.io/nuget/dt/BlazorTypewriter)

To Install

```

Install-Package BlazorTypewriter

```

or

```

dotnet add package BlazorTypewriter

```

Add stylesheet to head section

```

```

## Usage

![demo](https://user-images.githubusercontent.com/8319419/154805249-51243708-88eb-4b12-af6d-b6a6601d670b.gif)

```html



@code {

    TypewriterBuilder typewriter = new TypewriterBuilder(defaultCharacterPause: 6)

        .TypeString("First line... Lorem ipsum dolor sit amet, consectetur adipiscing elit.")

        .Pause(1000)

        .DeleteAll()

        .TypeString("Second line... Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 50)

        .Pause(500)

        .DeleteAll(30)

        .TypeString("Third line... Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 20)

        .Pause(500)

        .DeleteAll(20)

        .Pause(500)

        .Loop();

}

```

To customise the cursor set the `CustomClass` property of the `` tag and target the `border-color`.

## License

This project is licensed under the terms of the [MIT license](https://github.com/ormesam/blazor-typewriter/blob/master/LICENSE).