Адаптация React.js с помощью Intro.js

Демонстрация базового использования Intro.js

Работая над проектом с открытым исходным кодом (Care Amarillo), я искал способ направлять новых пользователей. Я использовал Intro.js раньше, поэтому искал и нашел для него оболочку React. Я продемонстрирую основное использование этого пакета.

Вот небольшой пример того, чего мы хотим достичь:

Во-первых, давайте создадим пустое приложение для реагирования. Я использую приложение create-реагировать для настройки стандартного кода. Если у вас его еще нет, вы можете обратиться к документации здесь:

Запустите команду в терминале (убедитесь, что вы находитесь в корневом каталоге этого проекта):

npx create-react-app onboarding

Обратите внимание, что «онбординг» — это название, которое я дал приложению React.

После завершения сборки вы можете запустить приложение с помощью этой команды в терминале:

npm start

Вы увидите исходный шаблон следующим образом:

Затем откройте App.js.

Код изначально такой:

import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

Давайте изменим это на это:

import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <div id="buttonRow">
        <button id="help">Help</button>
        <button id="about">About</button>
        <button id="contact">Contact Us</button>
      </div>
    </div>
  );
}
export default App;

Обратите внимание, что мы удалили элемент заголовка и добавили ряд кнопок.

Затем откройте файл App.css и добавьте CSS buttonRow:

#buttonRow{
  display: flex;
  justify-content: space-evenly;
  padding: 8px;
}

Далее нам нужно установить реактивный пакет intro.js. Запустите эту команду в своем терминале:

npm i intro.js-react

Снова откройте App.js и добавьте эти два импорта:

import { Steps } from 'intro.js-react';
import React, {useState} from 'react';

Теперь прямо над buttonRow добавьте компонент Intro.js Step:

<Steps
    enabled={enabled}
    steps={steps}
    initialStep={initialStep}
    onExit={onExit}
/>

Полный HTML должен быть таким:

<div className="App">
    <Steps
        enabled={enabled}
        steps={steps}
        initialStep={initialStep}
        onExit={onExit}
     />
     <div id="buttonRow">
        <button id="help">Help</button>
        <button id="about">About</button>
        <button id="contact">Contact Us</button>
     </div>
</div>

Поскольку App.js — это функциональный компонент, мы будем использовать хуки для Enabled, Steps и InitialStep. Добавьте этот код прямо над кодом, который возвращает ваш HTML.

const [enabled,setEnabled] = useState(true)
const [initialStep,setInitialStep] = useState(0)
  
const onExit = () => {
    setEnabled(false)  
}
const steps = [
    {
      element: '#help',
      intro: 'You can use this button for help',
      position: 'right',
    },
    {
      element: '#about',
      intro: 'You can use this button to get more information',
    },
    {
      element: '#contact',
      intro: 'You can use this button to contact us',
    },
];

Мы установили для параметра enable значение true, а для InitialStep — значение 0. Это будет автоматически создавать Intro.js всякий раз, когда пользователь открывает этот экран. Функция onExit отключает Intro.js после выхода.

Объект шагов определяет наши шаги. В нашем случае мы используем id, но пакет поддерживает и другие селекторы. Вступление определяет сообщение, которое мы хотим получить для каждого шага.

Перезагрузите страницу, и это должно быть вашим результатом:

Вот полный исходный код App.js:

import './App.css';
import 'intro.js/introjs.css';
import { Steps } from 'intro.js-react';
import React, {useState} from 'react';
function App() {
    const [enabled,setEnabled] = useState(true);
    const [initialStep,setInitialStep] = useState(0);
  
    const onExit = () => {
        setEnabled(false)
    }

    const steps = [
        {
            element: '#help',
            intro: 'You can use this button for help',
            position: 'right',
        },
        {
            element: '#about',
            intro: 'You can use this button to get more information',
        },
        {
            element: '#contact',
            intro: 'You can use this button to contact us',
        },
    ];

    return (
        <div className="App">
            <Steps
              enabled={enabled}
              steps={steps}
              initialStep={initialStep}
              onExit={onExit}
            />
            <div id="buttonRow">
                <button id="help">Help</button>
                <button id="about">About</button>
                <button id="contact">Contact Us</button>
             </div>
        </div>
     );
}

export default App;

Спасибо, что нашли время прочитать эту статью!

Присоединяйтесь к Medium по моей реферальной ссылке. Ваш членский взнос напрямую поддерживает Кристофера Коффи и других писателей, которых вы читаете. Вы также получите полный доступ ко всем историям на Medium.

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.