npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hangul-typing-animation

v1.1.5

Published

It is a library that can be used to create a typing animation(for Korean).

Downloads

41

Readme

Demo in React

Edit elated-heisenberg-d2zd92

hangul-typing-animation

hangul-typing-animation은 한글 타이핑 애니메이션을 쉽게 구현할 수 있는 라이브러리입니다.

기본적인 HTML DOM이나, React, Vue, Angular 등의 프레임워크에서 사용할 수 있습니다.

한글은 자소 단위로 분해되어 타이핑 애니메이션이 진행됩니다. 영어나 숫자는 그대로 타이핑 애니메이션이 진행됩니다. 이때 한글의 쌍자음과 쌍모음은 분리하지 않고 키보드 입력처럼 한번에 처리합니다. 하지만 겹자음과 겹모음은 따로 분리되어 처리되도록 하였습니다.

hangul-typing-animation is a simple hangul typing animation library.

It has no dependencies, so it can be used in basic DOM or Node.js environments, as well as in frameworks like React, Vue, and Angular.

Korean characters are decomposed into individual components (jamos) for the typing animation. English letters and numbers are animated as they are, without decomposition. During this process, Korean double consonants and double vowels are not separated and are treated as a single keyboard input. However, combined consonants and vowels are separately decomposed and processed.


Installation

npm install hangul-typing-animation

or

yarn add hangul-typing-animation

Default Usage(타이핑 애니메이션 기본 사용법)

<div id="typing"></div>

import { createTypeStream, delay } from 'hangul-typing-animation';

const typeStream = createTypeStream({
  perChar: 40,
  perHangul: 80,
  perSpace: 0,
  perLine: 0,
  perDot: 320
});

const runAnimation = async () => {
  await delay(2000)
  await typeStream(
      `쌍자음과 쌍모음은 분리하지 않고 키보드 입력처럼 한번에 처리합니다.
      겹자음과 겹모읍은 따로 분리되어 처리됩니다.
      겹자모의 예는 다음과 같습니다.
      꿹뷁뷹같은 글자, 읽다, 읎다. 핥다. 앉거나, 없다.
      English or number also supported.
      1234567890
      예제 끝!`,
    async (typing) => {
      document.getElementById('typing').innerHTML = typing;
    }
  )
}
runAnimation()

DelayOptions

전체 (milliseconds) 단위 입니다.

All options are in milliseconds.

  • perChar : 입력 문자 하나당 딜레이 시간 (Default: 40), per input char delay time (Default: 40),
  • perHangul : 한글의 완성형 하나당 딜레이 시간 (Default: 80), per composed hangul delay time (Default: 80),
  • perSpace : 공백 하나당 딜레이 시간 (Default: 0), per space delay time (Default: 0),
  • perLine : 줄바꿈 하나당 딜레이 시간 (Default: 0), per line delay time (Default: 0),
  • perDot : 마침표 하나당 딜레이 시간 (Default: 320), per dot delay time (Default: 320)
  • toggle : true면 이벤트를 다시 호출했을때, 일시 정지 합니다. (Default: false), If true, it will pause when the event is called again. (Default: false)

Usage for decompose and compose korean (한글 자소 분해, 재결합)

애니메이션을 위해 한글을 자소 단위로 분해하고, 애니메이션이 끝난 후에는 다시 합쳐야 할 경우 사용합니다.

쌍자음과 쌍모음은 분리하지 않고 키보드 입력처럼 한번에 처리합니다.

하지만 겹자음과 겹모음은 따로 분리되어 처리되도록 하였습니다.

import { decomposeHangul, composeHangul } from 'hangul-typing-animation';

const decomposedText = decomposeHangul('앉았다.')
console.log(decomposedText)
// result [["ㅇ","ㅏ","ㄴㅈ"],["ㅇ","ㅏ","ㅆ"],["ㄷ","ㅏ"],["."]];
const composedText = composeHangul(decomposedText)
console.log(composedText)
// result 앉았다.

Reference

type TypeStreamDelayOptions = {
  perHangul?: number,
  perChar?: number,
  perSpace?: number,
  perLine?: number,
  perDot?: number,
  toggle?: boolean
}

type CreateTypeStream = (options?: TypeStreamDelayOptions) => TypeStream;

type TypeStreamResult = {
  textContent: string,
  decomposedText: string[][],
  charIndex: number,
  jasoIndex: number,
  lastJaso: string,
  isEnd: boolean
  status: 'stopped' | 'playing' | 'done' | 'restart'
}

type TypeStream = (
  text: string,
  callback: (string: string, stream: {
  decomposedText: string[][], charIndex: number, jasoIndex: number, lastJaso: string, isEnd?: boolean
}) => void
) => Promise<TypeStreamResult>;

createTypeStream(options?: TypeStreamDelayOptions): TypeStream

  • options: TypeStreamDelayOptions— Delay times after word, char, space, line, dot. (milliseconds) (각, 단어, 문자, 공백, 줄바꿈, 마침표 후 딜레이 시간. (밀리초))
  • return: TypeStream— TypeStream function. (TypeStream 함수 반환)

TypeStream(text: string, callback: (typing: string, stream: { decomposedText: string[][], charIndex: number, jasoIndex: number, lastJaso: string, isEnd?: boolean }) => void): Promise<TypeStreamResult>

  • text: string— Text to type. (타이핑할 텍스트)
  • callback: (string: string, stream: { decomposedText: string[][], charIndex: number, jasoIndex: number, lastJaso: string, isEnd?: boolean }) => void— Callback function. typing is returns current typing(animation) string. stream is current typing stream data. (콜백 함수. typing은 현재 타이핑(애니메이션) 문자열을 반환합니다. stream은 현재 타이핑 스트림 데이터입니다.)
  • return: Promise<TypeStreamResult>— The Promise resolves with the final TypeStream data upon completion of the animation. (애니메이션이 완료되면 Promise는 최종 TypeStream 데이터를 반환합니다.)

decomposeHangul(text: string): string[][]

  • text: string— Text to decompose(for korean). (분해할 텍스트)
  • return: string[][]— Decomposed text(for korean). (분해된 텍스트, 한글 자소로 분해된 텍스트) - [초성, 중성, 종성][]

composeHangul(decomposedText: string[][]): string

  • decomposedText: string[][]— Decomposed text(for korean). (분해된 텍스트, 한글 자소로 분해된 텍스트) - [초성, 중성, 종성][]
  • return: string— Composed text(for korean). (분해된 텍스트를 합친 텍스트)

delay(ms: number): Promise<void>

  • ms: number— Delay time. (딜레이 시간)