Как реализовать эффект пишущей машинки в React

Как реализовать эффект пишущей машинки в React

Мой путь программирования в Flatiron School продолжается, и еще один этап подошел к концу.

На этапе 3 я узнал о Ruby, в частности об ActiveRecord, и о том, как использовать Sinatra для создания серверной части приложений. Хотя мне очень понравился Ruby и то, насколько он больше ориентирован на логическую сторону программирования, чем на интерфейс, мне также было предложено пересмотреть и конкретизировать свои навыки React при выполнении моего проекта в конце фазы 3.

В моем проекте одной из моих задач было создание страницы «О нас». Это просто основная страница с парой предложений, описывающих суть нашего проекта, и некоторой дополнительной информацией. Поскольку функциональность страницы «О программе» была довольно простой, я хотел добавить некую форму эффекта движения, чтобы, надеюсь, лучше привлечь внимание зрителя.

После нескольких дней исследований и планирования я наткнулся на замечательный подключаемый модуль JS под названием typewriter-effect(https://www.npmjs.com/package/typewriter-effect ). Это делает так, что когда мы импортируем его в наш компонент React, мы можем реализовать анимацию набора текста для нашего контента на странице.

npm i typewriter-effect

Прежде всего, я установил эффект пишущей машинки с помощью npm.

import Typewriter from "typewriter-effect";

Затем, поскольку я хотел использовать эффект пишущей машинки на странице About, я пошел дальше и импортировал пакет из своего компонента About.js. Запустить эту строчку кода — уже полдела!

const About = () => {
  return (

    <div className="aboutHeader">
      <RestaurantMenuIcon fontSize='large' />
      <h1 className='foodiTitle'>Foodi.</h1>
      <h4 className='infoText2'>An application that allows users to search for recipes and their creators, and save them to a list of recipes</h4>
      <div className='infoText2'>Created By:
      <Typewriter
        onInit={(typewriter)=> {
          typewriter
            .typeString("William, Ian and Jason")
            .pauseFor(1000)
            .deleteAll()
            .typeString("Future Software Engineers")
            .pauseFor(1000)
            .deleteAll()
            .typeString("World Leaders")
            .pauseFor(1000)
            .deleteAll()
            .typeString("Blood and Sweat")
            .pauseFor(1000)
            .deleteAll()
            .typeString("William, Ian and Jason")
            .pauseFor(1000)
            .start();
        }}
      />
      </div>
    </div>
  );
}

export default About;

Чтобы использовать этот эффект, я добавил компонент ‹Печатная машинка /›, импортированный из эффекта пишущей машинки, под ‹div›Created By:‹/div›. > чтобы специально установить текст, который следует за этим div, в качестве пишущей машинки. onInit — это реквизит, передаваемый компоненту ‹Typewriter /›. Это функция, которая вызывается при инициализации компонента ‹Typewriter /›. Ему передается функция обратного вызова, которая вызывается с экземпляром компонента ‹Typewriter /›, который затем можно использовать для взаимодействия с компонентом и выполнения таких действий, как ввод строки или удаление текста.

Полный фрагмент кода:

import React from 'react';
import Typewriter from "typewriter-effect";
import "./About.css"
import RestaurantMenuIcon from '@mui/icons-material/RestaurantMenu';

const About = () => {
  return (

    <div className="aboutHeader">
      <RestaurantMenuIcon fontSize='large' />
      <h1 className='foodiTitle'>Foodi.</h1>
      <h4 className='infoText2'>An application that allows users to search for recipes and their creators, and save them to a list of recipes</h4>
      <div className='infoText2'>Created By:
      <Typewriter
        onInit={(typewriter)=> {
          typewriter
            .typeString("William, Ian and Jason")
            .pauseFor(1000)
            .deleteAll()
            .typeString("Future Software Engineers")
            .pauseFor(1000)
            .deleteAll()
            .typeString("World Leaders")
            .pauseFor(1000)
            .deleteAll()
            .typeString("Blood and Sweat")
            .pauseFor(1000)
            .deleteAll()
            .typeString("William, Ian and Jason")
            .pauseFor(1000)
            .start();
        }}
      />
      </div>
    </div>
  );
}

export default About;

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

Как реализовать эффект пишущей машинки в React

Вопросы по теме