# Setting up a new React project with Formik

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.plyr.io/3.6.8/plyr.css" />
    <style>
      /* Custom Player Styles */
      .custom-player .plyr--video .plyr__controls {
        background-color: #1e2635;
        padding-bottom: 15px;
        padding-top: 15px;
      }

      .custom-player .plyr__control {
        color: #ff8a00;
      }

      .custom-player .plyr__control:hover,
      .custom-player .plyr--video .plyr__control[aria-expanded="true"] {
        color: white;
      }

      .custom-player .plyr__progress--played {
        background-color: #4f5e77;
      }

      .custom-player .plyr__progress--buffer {
        background-color: #36445c;
      }

      .custom-player .plyr__volume--display {
        color: #ff8a00;
      }

      .custom-player .plyr__control.plyr__tab-focus,
      .custom-player .plyr__control[aria-expanded="true"] {
        background-color: #ff8a00;
        color: #323232;
      }

      .custom-player .plyr__menu__value[data-value="0.5"] {
        color: #ff8a00;
      }

      .custom-player .plyr__controls .plyr__controls__item.plyr__time {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__menu__container .plyr__control > span {
        font-family: "Hind Siliguri", sans-serif;
        align-items: inherit;
        display: flex;
        width: 100%;
        color: #36445c;
        font-size: 16px;
      }

      .custom-player .plyr__control--overlaid svg {
        left: 5px;
        position: relative;
        fill: white;
        width: 40px;
        height: 40px;
        margin: 10px;
      }

      .custom-player .plyr__progress .plyr__tooltip {
        font-size: 16px;
        font-family: "Hind Siliguri", sans-serif;
      }

      .custom-player .plyr__progress input[type="range"] {
        cursor: pointer;
      }

      .custom-player .plyr__control {
        color: white;
      }

      .plyr__control.plyr__control--overlaid {
        background-color: #ff8a00;
      }

      .custom-player .plyr__progress input[type="range"] {
        color: #ff8a00;
      }

      .custom-player .plyr__volume input[type="range"] {
        color: #ff8a00;
        cursor: pointer;
      }

      .custom-player .plyr__control:hover {
        background-color: #ff8a00;
        color: white !important;
      }

      .custom-player
        .plyr__menu__container
        .plyr__control[role="menuitemradio"][aria-checked="true"]:before {
        background-color: #ff8a00;
      }

      .custom-player .plyr__control:hover span {
        color: white;
      }

      .plyr--video {
        border: 3px solid #4f5e77;
        border-radius: 10px;
      }

      /* Custom Transcript Styles */
      .transcript {
        margin-top: 20px;
        padding: 10px;
        line-height: 1.5;
        height: 200px;
        overflow-y: auto;
        border: 3px solid #4f5e77;
        border-radius: 10px;
        background-color: white;
      }

      .highlight {
        background-color: #ff8a00;
        color: white;
        font-weight: 600;
        padding: 5px;
        transition: 0.2s ease-in;
      }

      .my-hidden {
        display: none;
      }

      .show-transcript-btn {
        margin-top: 30px;
        background-color: #ff8a00;
        font-family: inherit;
        font-size: 18px;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        padding: 7px 14px;
        cursor: pointer;
        border: none;
        transition: 0.5s ease-in-out;
      }

      .show-transcript-btn:hover {
        background-color: #d27204;
      }
    </style>
  </head>
  <body>
    <div class="custom-player">
      <video
        width="100%"
        controls
        poster="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/formik/get-started-with-forlmik-video-poster-v1.png"
      >
        
        <source
          src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react-pro/formik/get-started-record-v2.mp4"
          type="video/mp4"
          data-plyr-config='{
          "quality": {
            "default": "720",
            "options": ["144", "240", "360", "480", "720", "1080"]
          }
        }'
        />
      </video>
    </div>
    <button class="show-transcript-btn js-show-transcript-btn">
      Show Transcript
    </button>
    <div class="transcript my-hidden"></div>

    <script src="https://cdn.plyr.io/3.6.8/plyr.js"></script>
    <script>
      const showTranscriptBtn = document.querySelector(
        ".js-show-transcript-btn"
      );

      showTranscriptBtn.addEventListener("click", handleClick);

      function handleClick() {
        const transcriptElement = document.querySelector(".transcript");
        transcriptElement.classList.toggle("my-hidden");

        if (transcriptElement.classList.contains("my-hidden")) {
          showTranscriptBtn.textContent = "Show Transcript";
        } else {
          showTranscriptBtn.textContent = "Hide Transcript";
        }
      }

      const player = new Plyr(".custom-player video", {
        controls: [
          "play-large",
          "play",
          "progress",
          "current-time",
          "mute",
          "volume",
          "captions",
          "settings",
          "fullscreen",
        ],
        volume: 0.5,
        muted: false,
        settings: ["captions", "quality", "speed"],
        captions: {
          active: true,
          language: "en",
        },
        fullscreen: {
          enabled: true,
          fallback: true,
          iosNative: true,
        },
        speed: {
          selected: 1,
          options: [0.5, 1, 1.5, 2],
        },
        quality: {
          default: "720",
          options: ["144", "240", "360", "480", "720", "1080"],
        },
      });

      player.on("qualitychange", (event) => {
        console.log(`Quality changed to ${event.quality}`);
      });

      player.on("ratechange", (event) => {
        console.log(`Speed changed to ${event.detail.plyr.speed}`);
      });

      /*
        Change the transcript data:
          - "start" is the time in seconds indicating from what time the text must be shown.
          - "end" is the time in seconds indicating when the text must be hidden.
          - "text" is the text to be shown.
        NOTE: We can specify any time segments (any start/end). It doesn't have to be exactly 10s.
      */
      const transcriptData = [
        {
          start: 0,
          end: 5,
          text: "I have to install Formik library, npm i formik.",
        },
        {
          start: 7,
          end: 18,
          text: "To ensure that we have all packages installed, we can check package.json file and right here we see our Formik. Now we are ready to start. ",
        },
      ];

      const transcriptElement = document.querySelector(".transcript");

      function updateTranscript(currentTime) {
        // Clear previous transcript highlighting
        transcriptElement.querySelectorAll("p").forEach((p) => {
          p.classList.remove("highlight");
        });

        // Find the current segment based on the current time
        const currentSegment = transcriptData.find(
          (segment) =>
            currentTime >= segment.start && currentTime <= segment.end
        );

        // Highlight the current segment's text
        if (currentSegment) {
          const currentSegmentElement = transcriptElement.querySelector(
            `p[data-start="${currentSegment.start}"][data-end="${currentSegment.end}"]`
          );
          if (currentSegmentElement) {
            currentSegmentElement.classList.add("highlight");
          }
        }
      }

      function scrollToCurrentSegment() {
        const currentSegment = transcriptElement.querySelector(".highlight");
        if (currentSegment) {
          const transcriptElementHeight = transcriptElement.offsetHeight;
          const segmentOffsetTop = currentSegment.offsetTop;
          const segmentOffsetHeight = currentSegment.offsetHeight;

          // Calculate the top and bottom positions of the current segment
          const segmentTop = segmentOffsetTop - transcriptElement.offsetTop;
          const segmentBottom = segmentTop + segmentOffsetHeight;

          // Calculate the center position of the transcript div
          const transcriptCenter = transcriptElementHeight / 2;

          // Calculate the scroll offset to center the current segment
          const scrollOffset =
            segmentOffsetTop -
            transcriptElement.offsetTop +
            segmentOffsetHeight / 2 -
            transcriptCenter;

          transcriptElement.scrollTo({
            top: scrollOffset,
            behavior: "smooth",
          });
        }
      }

      player.on("timeupdate", (event) => {
        const currentTime = event.detail.plyr.currentTime;
        updateTranscript(currentTime);
        scrollToCurrentSegment();
      });

      const transcriptHTML = transcriptData
        .map(
          (segment) =>
            `<p data-start="${segment.start}" data-end="${segment.end}">${segment.text}</p>`
        )
        .join("");

      transcriptElement.innerHTML = transcriptHTML;
    </script>
  </body>
</html>

## Step 1: Create a new React project
To begin, let's create a new React project using the Create React App tool. Open the command line or terminal and run the following command:
```
npx create-react-app .
```

## Step 2: Install Formik library
To use Formik in our project, we need to install it as a dependency. Navigate to the project's root directory in the command line or terminal, and run the following command:
```
npm install formik
```
This command installs the Formik library and adds it to the project's dependencies. Once the installation is complete, we can verify if Formik has been successfully added by checking the `package.json` file.
Open the `package.json` file. Look for the `dependencies` section, and ensure that `formik` (line 5) is listed with its version number:
```js
"dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "formik": "^2.4.2",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
},
```
Please note that the version numbers of Formik and other dependencies in the `package.json` file may differ from the ones shown here.

Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.

Explore the significance of additional tools that amplify the efficiency and productivity of React applications. Optimize performance. Furthermore, this revision will guarantee a robust groundwork as you delve into more advanced topics.

Discover how to implement navigation and routing in React apps using React Router. Learn about the core concepts of routes and URLs and how React Router facilitates the creation of dynamic, multi-page applications with seamless transitions between different views.

Research the capabilities of Redux Toolkit, which streamlines state management in React-Redux applications. This library provides opinionated tools and best practices, empowering developers to craft cleaner and more efficient code.

Formik is a powerful library that empowers React developers to quickly manage forms with optimal efficiency and best practices. We will explore the high-level capabilities of Formik, guiding you through the best practices for building robust and user-friendly forms in your React apps.

Master testing React applications with Jest. Learn how to ensure code quality, prevent bugs, and confidently refactor your projects with Jest's powerful features tailored for React testing.

Uncover suitable actions to take next by aligning them with your goals and interests.

Get Started with Formik

Setting up a new React project with Formik

Step 1: Create a new React project

Step 2: Install Formik library