Как создать эффект пишущей машинки в ReactJS?

Опубликовано: 7 Августа, 2021

Эффект пишущей машинки в ReactJS - это пакет JS, который можно использовать для лучшего дизайна пользовательского интерфейса. Этот эффект позволяет нам создавать простую анимацию набора текста в ReactJS. Для использования Typewriter в ReactJS нам необходимо установить пакет typewriter-effect.

Предпосылки:

Основы ReactJS
Уже создан ReactJSapp

Ниже по порядку описаны все шаги для использования стилизованных компонентов в React.

Монтаж:

Шаг 1. Прежде чем двигаться дальше, сначала мы должны установить эффект пишущей машинки, выполнив следующую команду в каталоге вашего проекта с помощью терминала в папке src, или вы также можете запустить эту команду в терминале Visual Studio Code в своем папка проекта.
```
 npm install - сохранить эффект пишущей машинки
```
```
 пряжа добавить машинку-эффект
```
Шаг 2. После установки пакета откройте файл App.js, который находится в каталоге вашего проекта, в папке src, и удалите код, находящийся внутри него.
Шаг 3: Теперь импортируйте React и пакет эффекта пишущей машинки.
Шаг 4. Добавьте в файл app.js этот фрагмент кода для импорта пакета React и эффекта пишущей машинки.
```
 импортировать React из React;
Пишущая машинка импортная из "Машинка-эффект";
```

Ниже приведен пример программы, иллюстрирующей использование эффекта пишущей машинки:

Имя файла - App.js:

Javascript

 import React from 'react' ;
 
//importing typewriter-effect
 import Typewriter from "typewriter-effect" ;
 import './App.css' ;
 
function App() {
  return (
    <div className= "App" >
      <Typewriter
 
       onInit={(typewriter)=> {
 
       typewriter
       
       .typeString( "GeeksForGeeks" )
        
       .pauseFor(1000)
       .deleteAll()
       .typeString( "Welcomes You" )
       .start();
       }}
       />
    </div>
  );
 }
 
export App; default 

Имя файла - App.css

CSS

 .App {
  font-family : sans-serif ;
  font-weight : 800 ;
  font-size : 40px ;
  text-align : center ;
  display :flex;
  justify- content : center ;
  align-items: center ;
  min-height : 100 vh;
  background : green ;
 }

Вывод: Следовательно, используя вышеупомянутые шаги, мы можем использовать эффект пишущей машинки для импорта и изменения анимации набора текста React.

Technical Scripter

Как создать эффект пишущей машинки в ReactJS?

Javascript

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ