@reusable-ui-tr/react-type-writer-effect

1.0.3 • Public • Published

ReusableUITR React component for typewriter effect

A React component for creating a typewriter effect with customizable options.

Demo

Click here for a live demo.

Installation

  1. Install '@reusable-ui-tr/react-type-writer-effect' with npm
npm i @reusable-ui-tr/react-type-writer-effect
  1. Import TypeWriterEffect component in your react component
import TypeWriterEffect from "@reusable-ui-tr/react-type-writer-effect";
  1. Use 'TypeWriterEffect' component
<TypeWriterEffect
  blinkDuration="2s"
  cursorColor="blue"
  fontFamily="Lucida Console"
  fontSize="20px"
  highlightColor="green"
  text="Hello World!"
  textColor="white"
  textWrapperElementType="p"
  typingSpeed="slow"
/>

Properties

Property Name Property Type Usage Default Value Required
blinkDuration String Blink duration of typewriter effect in seconds or milliseconds (Example values: '1s', '10ms' etc.) '1s' no
cursorColor String All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) 'black' no
fontFamily String Font family of the text 'Roboto, Arial, sans-serif' no
fontSize String Font size of the text '16px' no
highlightColor String Highlight color of the text 'transparent' no
text String Content of the text none yes
textColor String All CSS legal color values are supported. (Example values: '#00ff00', #00ff0080, rgb(0, 255, 0), rgba(0, 255, 0, 0.3), hsl(120, 60%, 70%), hsla(120, 60%, 70%, 0.3), 'green' etc.) 'black' no
textWrapperElementType String Type of HTML element to wrap text (All HTML elements are valid) 'code' no
typingSpeed String Typing speed of typewriter effect (Only following keywords are valid: 'slowest', 'slow', normal', 'fast', 'fastest') 'normal' no

Dependencies

Dev Dependencies

Dependents (0)

Package Sidebar

Install

npm i @reusable-ui-tr/react-type-writer-effect

Weekly Downloads

5

Version

1.0.3

License

MIT

Unpacked Size

48.6 kB

Total Files

8

Last publish

Collaborators

  • reusable-ui-tr