Tip-Tap Editor with Next.js #2 Using the editor with React-Hook-Form

Purpose

In this article, I will show you how to use Tip-Tap Editor with react-hook-form, updating the start up code from my previous article. Final result will look like the below image which is a basic article writing page.

Prerequisite

Familiarity with React Hook Form and tailwind CSS.

Step 1: Nesting the editor

The editor is working and it looks cool, but it is likely that you want to provide the editor in some context of an UI rather than giving the whole space for the editor. So, we will go ahead and create a dummy ui for this project.

Let’s start by adding a header to the webpage, first create the header component.

// src/components/header/header.tsx
import { MenuIcon } from 'lucide-react'
import Image from 'next/image'
import React from 'react'

export default function Header() {
  return (
    <header className="w-full flex flex-row justify-between items-center p-4">
      <section className="flex flex-row gap-4 items-center">
        <Image src="favicon.svg" alt="logo" width={32} height={32} />
        <span className="font-bold text-lg">Tip Tap Editor</span>
      </section>
      <MenuIcon />
    </header>
  )
}