Typelt

# Typelt
Typelt는 글자를 인터렉티브하게 만들어주는 자바스크립트 기반의 라이브러리이다.
마치 타이핑을 치는 효과를 주어 글자에 강조를 주어 사용자 경험을 증가시켜준다.

Typelt는 순수 자바스크립트 기반으로 작성이 가능하고 node를 통한 다운로드나 혹은 CDN을 제공한다.

적용 플랫폼

Typelt은 순수자바스크립트를 포함하여 리액트, WordPress, php에 해당 서비스를 제공하고 있다.

순수자바스크립트에 적용하는 것은 스크립트 태그에 dom요소를 가져와서 작성하는 방법과 html요소에 직접 작성하는 방법, 함수를 만들어서 체이닝 방식으로 동작하게 하는 방법이 있다.

리액트는 함수형 컴포넌트 안에 해당 라이브러리 코드를 작성하는 방식을 제공한다. (단, 18버전은 호환하지 않음.)

현재 리액트를 배우고 있음으로 리액트를 통한 라이브러리를 적용해 볼 것 이다.

Typelt 리엑트(17버전 이하)

여기서 사용한 리엑트의 버전은 17.0.2이다.
리엑트 18버전은 현재 호환되지 않음.

component

import TypeIt from "typeit-react";
import React from 'react';

export default () => {
  // 함키화 시키고 함수인자를 컴포넌트에 넘겨주면 체이닝을 이용할 수 있다.
  // 그러나 리엑트 18버전에서는 호환이 되지 않는 듯 하다. 
 const getBeforeInit=(instance) => {
   //리엑트는 className을 사용하지만 체이닝을 통한 class는 그냥 class이용
    instance.options({lifeLike: false,nextStringDelay: 1000,loop: true})
            .pause(2000)
            .delete(34)
            .pause(1000)
            .type("<span class='span2'>  but using React version of 17, you can tasty it</span>");

    // Remember to return it!
    return instance;}
    return (
        <div className="App">
            <TypeIt getBeforeInit={getBeforeInit}>
            This library is very cool!
              <span className="span"> but not support React version 18!
                </span>
              </TypeIt>
        </div>
    );
};

App

import React from "react";
import "./style.css";
import Type from './component/type';

export default function App() {
  return (
    <div>
      <Type/>
    </div>
  );
}

위와 같이 작성하면 아래와 같이 실행된다.
*주. 내가 작성하면서 동영상을 저장한거 아님, 코드가 실행되면서 작동되는 거임.

위와 같이 작성을 하면서 태그를 넣어 dom요소를 이용해 css를 적용시킬 수도 있다.
보통 글자가 써져있는 브랜드는 정적인 경우가 많은데 깔끔하게 브랜드의 글자도 동적으로 만들 수 있겠다는 생각이 든다.
생각해보니 무궁무진한 놈인게 분명하지만 빨리 리엑트 18버전을 지원했으면 한다...

그냥 글자 차이인데 격이 달라져 보이는 건 기분탓..