https://github.com/turkyden/react-typing-hook

Animated typing in ~400 bytes 🐡 of React Hook.
https://github.com/turkyden/react-typing-hook

entering hooks key-in react typical typing typinganimation typist

Last synced: about 2 months ago
JSON representation

Animated typing in ~400 bytes 🐡 of React Hook.

• Host: GitHub
• URL: https://github.com/turkyden/react-typing-hook
• Owner: turkyden
• Created: 2020-11-05T07:49:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-22T15:58:00.000Z (over 5 years ago)
• Last Synced: 2026-05-02T10:39:27.420Z (about 2 months ago)
• Topics: entering, hooks, key-in, react, typical, typing, typinganimation, typist
• Language: TypeScript
• Homepage: https://turkyden.github.io/react-typing-hook/
• Size: 4.44 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-typing-hook

Animated typing in ~2.6 kb 🐡 with React Hook.

![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

![GitHub](https://img.shields.io/github/license/Turkyden/react--typing--hook)

![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/Turkyden/react--typing-hook/REACT_TYPING_HOOK_BUILD/master)

[Preview in CodeSandBox →](https://codesandbox.io/s/react-typing-hook-5uv7j)

## Install

```yarn

yarn add react-typing-hook

```

or

```yarn

npm install react-typing-hook

```

## Usage

Type some animate text on the web.

```tsx

import useTyping from 'react-typing-hook'

function App() {

  const ref = React.useRef(null);

  

  useTyping(ref, {

    steps: ['Hello', 1000, 'Hello world!', 500],

    loop: Infinity,

    speed: 60

  })

  

  return 


  // 
Hello

  // ... 1000ms

  // 
Hello Hello

  // ... 500ms

  // 
Hello

}

```


## API

| Name | Type | Default | Description |

| ---- | ----- | :----: | --- |

| ref | `React.RefObject` | - | The ref of typical text wraper |

| steps | `Array` | - | Step array assign to the typing |

| loop | `number` | 1 | The number of loop typing animation effect, **Infinity** |

| speed | `number` | 60 | The speed of typing animation effect |

Add the classname on the dom.

```html



```


Such as a blink cursor style like this.

```css

.typingWrapper::after {

  content: "|";

  animation: blink 1s infinite step-start;

}

@keyframes blink {

  50% { opacity: 0; }

}

```

## Contributing

```yarn

yarn install

```

Compiles and hot-reloads for development

```yarn

yarn start

```

Compiles and minifies for production

```yarn

yarn build

```

## LICENSE

MIT