[React] Typeit 사용하기 (React v 17)

Typeit 라이브러리를 사용하면 text 애니메이션을 쉽고 이쁘게 사용할 수 있다.

 

 

 

https://www.typeitjs.com/docs/react

TypeIt for React | TypeIt

 

오늘은 React로 사용 예시를 드려고 한다.

 

npx create-react-app@latest typeit-example  

 

로 프로젝트를 하나 만든다

 

만들고나면 React 18 버전으로 만들어 질텐데 

 

dependency 에러랑 여러 에러가 너무 많이나서 17버전으로 사용하는 예시를 드려고 한다. (삽질만 1시간 넘게함)

 

package.json

{
  "name": "typeit-example",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.0",
    "typeit-react": "0.1.3"
  },
  "devDependencies": {
    "@babel/runtime": "7.13.8",
    "typescript": "4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

 

app.js

import { useState } from 'react';
import TypeIt from 'typeit-react';
// import './styles.css';

export default function App() {
  const [buttonText, setButtonText] = useState('Freeze');
  const [instance, setInstance] = useState(null);

  const toggleFreeze = () => {
    if (instance.is('frozen')) {
      instance.unfreeze();
      setButtonText('Freeze');
      return;
    }

    instance.freeze();
    setButtonText('Unfreeze');
  };

  return (
    <div className="App">
      <TypeIt
        element="h1"
        options={{ loop: true }}
        getAfterInit={instance => {
          setInstance(instance);
          return instance;
        }}
      >
        This will just keep on going.
      </TypeIt>
      <button onClick={toggleFreeze}>{buttonText}</button>
    </div>
  );
}

 

다른 예시 

import TypeIt from 'typeit-react';
// import './styles.css';

export default function App() {
  const SuperStrong = ({ children }) => {
    return <strong style={{ fontSize: '80px' }}>{children}</strong>;
  };
  return (
    <div className="App">
      <TypeIt>
        Weak text. <SuperStrong>Super strong text.</SuperStrong>
      </TypeIt>
    </div>
  );
}

이런식으로. 사용하면 이쁜 웹을 빠르게 만들 수 있을듯.