DEV Community: Theresa Okoro

Implementing Search Functionality in Django Rest Framework (DRF)

Theresa Okoro — Sun, 15 Sep 2024 15:37:19 +0000

Introduction

When building APIs with Django Rest Framework, one of the essential features you might want to include is a search functionality. This allows clients to query the API and filter results based on specific criteria, making it much more user-friendly and flexible.

Django provides us with a powerful tool for our APIs called django-filters, this gives us access to;

The DjangoFilterBackend class which supports highly customizable field filtering for REST framework.
The SearchFilter class supports simple single query parameter based searching which are case-insensitive partial matches, and is based on the Django admin's search functionality.
The OrderingFilter class supports simple query parameter controlled ordering of results.

We are going to focus on the SearchFilter for this tutorial as we are trying to implement search functionality.

1. Setting Up a Sample API

To demonstrate search functionality, we'll first set up a simple model, serializer, and view.

Step 1: Create a Model

Let's say we have a model for Category, JobSkills and PostAJob. Category is a ForeignKey to PostAJob and JobSkills is a ManyToManyField relationship to PostAJob.

class Category(models.Model):
   name = models.CharField(max_length=50, unique=True, null=True, blank=True)
   def __str__(self):
       return self.name

class JobSkills(models.Model):
   title = models.CharField(max_length=20, unique=True)
   category = models.ManyToManyField(Category)


   def __str__(self):
       return self.title

class PostAJob(models.Model):
   job_title = models.CharField(max_length=200)
   job_category = models.ForeignKey(Category, on_delete=models.CASCADE)
   job_skills = models.ManyToManyField(JobSkills, blank=True)
   job_salary_range = models.IntegerField(blank=True)
   job_description = models.TextField()


   def __str__(self):
       return self.job_title

Step 2: Create a Serializer

Create a serializer for the models.

class CategorySerializer(serializers.ModelSerializer):
   class Meta:
       model = Category
       fields = ['id', 'name']

class JobSkillsSerializer(serializers.ModelSerializer):
   category = CategorySerializer(many=True, read_only=True)


   class Meta:
       model = JobSkills
       fields = ['id', 'title', 'category']

class JobSerializer(serializers.ModelSerializer):
   job_category = CategorySerializer(read_only=True)
   job_skills = JobSkillsSerializer(many=True, read_only=True)

   class Meta:
       model = PostAJob
       fields = (
           'id',
           'job_title',
           'job_category',
           'job_skills',
           'job_salary_range',
           'job_description',
       )


   def create(self, validated_data):
       request = self.context['request']


       job_category_pk = request.data.get('job_category')
       validated_data['job_category_id'] = job_category_pk


       job_skills_data = request.data.get('job_skills')
       validated_data['job_skills'] = job_skills_data


       instance = super().create(validated_data)


       return instance

Step 3: Setup Django-Filter

To use SearchFilter, first install django-filter.
pip install django-filter

Then add 'django_filters' to Django's INSTALLED_APPS in your settings.py:

INSTALLED_APPS = [
    ...
    'django_filters',
    ...
]

Step 4: Create a View and URL

You should now add the search filter to an individual View or ViewSet.

The SearchFilter class will only be applied if the view has a search_fields attribute set. The search_fields attribute should be a list of names of text type fields on the model, such as CharField or TextField.

Here is what’s happening, we are adding a SearchFilter to the filter_backends and a search_fields which tells the filter class what fields it should query i.e if the user searches for a text and it is in the job_title or category or skills db section, if that string is available, the system should return what the user searched for.

If you have a ForeignKey or a ManyToMany relational fields like the below category and skills field example, you need to specify what the related lookup is by using the lookup API double-underscore notation __, this is what you can see in the model of the Category and JobSKills seen above. That is why in searchFields we have an underscore for job_category as the lookup we are using is the name - 'job_category_name’ and for job_skills, we are looking for title - 'job_skills_title',.

from rest_framework import filters
from rest_framework.pagination import PageNumberPagination

class PostAJobListView(GenericAPIView):
   serializer_class = JobSerializer
   queryset = (
       PostAJob.objects.select_related('job_category')
       .prefetch_related('job_skills')
       .all()
   )
   filter_backends = [filters.SearchFilter]
   search_fields = [
       'job_title',
       'job_category__name',
       'job_skills__title',
   ]

   def get(self, request, *args, **kwargs):
       # Get the filtered queryset
       queryset = self.filter_queryset(self.get_queryset())


       # Paginate the queryset
       page = self.paginate_queryset(queryset)
       if page is not None:
           # If pagination is applied, get the paginated response
           serializer = self.get_serializer(page, many=True)
           return self.get_paginated_response(serializer.data)


       # If no pagination, return the full response
       serializer = self.get_serializer(queryset, many=True)
       return Response(serializer.data, status=status.HTTP_200_OK)

urlpatterns = [
   path('post-a-job/', PostAJobListView.as_view(), name='post_a_job_list'),
]

Step 5: Testing the Search

Now, you can use the ?search= query parameter in the URL to search for books by title or author. For example:

http://127.0.0.1:8000/post-a-job/?search=Machine
This will return all jobs with "Machine" in the title or category or skills.

2. Advanced Search Customization

You can further customize the search functionality in various ways.
The search behavior may be specified by prefixing field names in search_fields with one of the following characters (which is equivalent to adding __ to the field):

Implementing Custom Search Functionality In some cases, you may need more control over the search behavior. You can override the get_queryset method in the view.

def get_queryset(self):
       """
       Optionally restricts the returned jobs to query parameter in the URL.
       """

       filter_query = Q()
       job_title = self.request.query_params.get(title)
       if job_title is not None:
           filter_query &= Q(job_title__contains=job_title)

       user_id = self.request.query_params.get('user_id')
       if user_id is not None:
           filter_query &= Q(created_by=user_id)

       salary = self.request.query_params.get('salary')
       if salary is not None:
           filter_query &= Q(job_salary_range__gte=salary)

       queryset = self.queryset.filter(filter_query)

       return queryset

In this example, we manually filter the queryset based on the search query parameter, allowing for more complex search logic.

Reference

https://www.django-rest-framework.org/api-guide/filtering/#searchfilter

Conclusion

Adding search functionality to your Django Rest Framework APIs can significantly enhance the user experience by allowing for flexible and efficient data retrieval. Using DRF's built-in SearchFilter, you can easily add basic search capabilities, and with a bit of customization, create more advanced and tailored search options. For even more performance, consider integrating specialized search tools.
Feel free to extend this example by implementing different filtering strategies or integrating third-party search services as per your application needs!

Handling Complex Multi Step Forms with Formik and Yup

Theresa Okoro — Sat, 14 Sep 2024 23:40:25 +0000

Introduction:

When creating forms on our own, we are tasked with managing our forms values, writing our custom event handlers for every input, handling error states manually and the worst part is creating verbose validation logic. This might be manageable for simple forms, but for more complex forms, it becomes imperative to use a form handler.

I love Formik and Yup because they're simple to use while still being lightweight so that they don't affect the performance of our site.

Formik provides a minimal API to manage form state, validation, error handling, and form submission. It gives you full control over how your form behaves without being too restrictive as it gives you the room and autonomy to adjust and manipulate your form to your desired state. Meanwhile, Yup is a concise but powerful object schema validation that compliments Formik to create powerful validation schemas, ensuring that your forms have strong validation rules and it is small enough for the browser and fast enough for runtime usage so not taking up too much performance space (which is very important for external apps).

Formik has a special config option / prop for Yup called validationSchema which will automatically transform Yup's validation errors into a pretty object whose keys match values and touched i.e whatever name you have for your field values and initialValues should match the name provided to the validationSchema.

What I love about Formik is that it provides components that abstracts and hides unneeded info under the hood by offering components like <Form />, <Field />, and <ErrorMessage /> that handle value changes, blur events, and validation messages, reducing the need for repetitive code. These components use React context, allowing you to access form state globally and make managing complex forms more efficient.

Common scenarios where complex forms are necessary include checkout processes, or applications with dynamic user data, such as adding multiple addresses or phone numbers.

Project Overview:

In this article, we'll build a multi-step form for a job board, where each step gathers specific information, such as job details and company information. We'll also implement dynamic fields, error handling, and validations using Yup and this is going to be done in a simple and succinct way.

Setup for the Tutorial

We'll start by setting up a React project with Formik and Yup. The installation is straightforward:

Formik Installation:
npm install formik - save or yarn add formik
Yup Installation:
npm install yup - save or yarn add yup
Once installed, we'll configure Formik and Yup, ensuring the form values, validation rules, and submission process are integrated.

Basic Setup of Formik

import { Formik, Form, Field, ErrorMessage } from "formik";

const Basic = () => (
 <div>
   <Formik
     initialValues={{ email: "", password: "" }} // Initial form values
     validate={(values) => {
       // Custom validation logic
       const errors = {};
       if (!values.email) {
         errors.email = "Required";
       } else if (!/\S+@\S+\.\S+/.test(values.email)) {
         errors.email = "Invalid email address";
       }
       if (!values.password) {
         errors.password = "Required";
       }
       return errors;
     }}
     onSubmit={(values, { setSubmitting }) => {
       // Handle form submission
       setTimeout(() => {
         alert(JSON.stringify(values, null, 2));
         setSubmitting(false);
       }, 400);
     }}
   >
     {({ isSubmitting }) => (
       <Form>
         <Field type="email" name="email" /> {/* Email input field */}
         <ErrorMessage name="email" component="div" /> {/* Error for email */}
         <Field type="password" name="password" /> {/* Password input field */}
         <ErrorMessage name="password" component="div" />{" "}
         {/* Error for password */}
         <button type="submit" disabled={isSubmitting}>
           Submit
         </button>
       </Form>
     )}
   </Formik>
 </div>
);

export default Basic;

Initial Values: You define the initial state of your form by passing an initialValues object to Formik. In this case, the form has two fields: email and password.

Validation: You can create custom validation logic in the validate function. Here, the form checks if the email and password fields are empty or if the email is in an invalid format.

Submission Handling: When the form is submitted, the onSubmit function handles the form data. This function simulates a form submission by displaying the values in an alert after a 400ms delay.

Field: This component connects your input field to Formik, automatically managing value changes and error handling for you. You simply should add the type if it's not a normal input field and the name (this should tally with the name on the initialValues and validation schema.

ErrorMessage: Displays error messages for each field, simplifying the error display logic, this should contain the name of the field.

STEP 1: MultiStepForm Component

Create a Multi-Step-Form component file within your components folder.

project/src/components/multi-step-form.tsx

import { Fragment } from "react";

type stepProps = {
 steps: any[];
 currentStep: number;
};

const MultiStepForm = ({
 steps,
 currentStep,
}: 
stepProps) => {
 return (
   <div className="md:max-w-5xl mx-auto p-4 text-black font-base">
     <div className="md:flex items-center justify-between mb-8 hidden">
       {steps.map((step, index) => (
         <Fragment key={step.id}>
           <div className="flex items-center mx-4">
             <div
               className={`rounded-full h-12 w-12 flex items-center justify-center text-white ${
                 currentStep >= step.id ? "bg-purple-200" : "bg-gray-400"
               }`}
             >
               {step.id}
             </div>
             <div className="ml-2 text-xl font-medium ">{step.title}</div>
           </div>
           {index < steps.length - 1 && (
             <div
               className={`flex-1 h-1 ${
                 currentStep > step.id ? "bg-purple-200" : "bg-gray-400"
               }`}
             ></div>
           )}
         </Fragment>
       ))}
     </div>

     <div className="mb-4">
       <h2 className="text-2xl font-bold mb-4 flex justify-center">
         {steps[currentStep - 1].title}
       </h2>
     </div>
   </div>
 );
};

export default MultiStepForm;

The MultiStepForm component displays a progress bar showing the current step in a multi-step form process. Each step is represented by a number and title, with lines connecting them for completed steps.

Steps Array: The steps array contains an ID and title for each step.
Current Step: The currentStep prop controls the active step visually and in the title.
Step Indicator: The round indicators change color when completed, and a horizontal line connects the steps.

STEP 2: Setting Up AddJob Component

Next, we create the AddJob component, which will hold the multi-step form's logic.

Within your SRC routes structure create a page for add-job.tsx, let's start with the boilerplate.

Here, currentStep tracks the user's position in the form, and goToNextStep and goToPreviousStep manages navigation by checking what step the user is on, add one step to the step to take the user to the next page or minus one step to take the user back.


import { useState } from "react";

const AddJob = () => {
 const [currentStep, setCurrentStep] = useState(1);
 const steps = [
   { id: 1, title: "Job Information" },
   { id: 2, title: "Company Information" },
   { id: 3, title: "Submit" },
 ];

 const goToNextStep = () => {
   if (currentStep < steps.length) {
     setCurrentStep(currentStep + 1);
   }
 };

 const goToPreviousStep = () => {
   if (currentStep > 1) {
     setCurrentStep(currentStep - 1);
   }
 };
};

return (TODO)

export default AddJob;

STEP 3: Form Validation with Yup

We are going to define our validation schema using Yup.

import * as Yup from "yup"

const validationSchema = Yup.object({
 jobTitle: Yup.string().required("Job title is required"),
 jobDescription: Yup.string().required("Please describe this role"),
 jobCategory: Yup.string().required("Kindly select a job category"),
 jobSkills: Yup.string().required("Please select skills needed"),
 jobSalary: Yup.string().required("Select a job salary"),
 jobUrl: Yup.string().required("Provide the link for the job"),
 companyName: Yup.string().required("Please provide the name"),
 companyHq: Yup.string(),
 companysWebsite: Yup.string().required("Enter the company's website"),
 companysEmail: Yup.string()
   .email("Invalid email address")
   .required("Enter the company's email"),
 companysDescription: Yup.string().required("What does the company do?"),
});

Currently, we are doing basic schema checks for almost all fields seen above.

Yup.string()/required("Error message to be shown to the user") states that the field is a required field which expects string values.

While companysEmail: Yup.string().email("Invalid email address")required("Enter the company's email"), validates that the user has inputted a string with an email format and it is a required field.

While there are more complex schema validation and I might create a separate article delving into it, let's keep the validation schema simple for our use case.

Step 4: Integrating Formik for Form Handling

In this step, we'll integrate Formik to handle form data, validation, and submission logic. We'll also connect it to our multi-step form navigation.

Importing Formik and Setting Up Form Structure

First, let's import Formik, Field, Form, and ErrorMessage components.
We'll then set up our form structure with initial values and link it to our validation schema.

Now, let's add the Formik component and bind it with our initial form values, validation schema, and the submission handler. We also include the MultiStepForm component to visually display the current step.

import { useState } from "react";
import MultiStepForm from "./components/multi-step-form";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";

const validationSchema = Yup.object({
 jobTitle: Yup.string().required("Job title is required"),
    // other fields...
});

const AddJob = () => {
 const [currentStep, setCurrentStep] = useState(1);
 const steps = [
…
 ];

 const goToNextStep = () => {
…
 };

 const goToPreviousStep = () => {
…
 };

 const createJobFn = (values, { resetForm, setSubmitting }) => {
   console.log(values);
   resetForm();
   setSubmitting(false);
 };

 return (
   <section className="w-full nx-auto flex-row min-h-screen flex justify-center items-center bg-gray-100 px-4">
     <div className="bg-white shadow-lg rounded-lg p-8">
       <MultiStepForm
         steps={steps}
         currentStep={currentStep}
       />
       <Formik
         initialValues={{
           jobTitle: "",
           jobDescription: "",
           jobCategory: "",
           jobSkills: "",
           jobSalary: "",
           jobUrl: "",
           companyName: "",
           companyHq: "",
           companysWebsite: "",
           companysEmail: "",
           companysDescription: "",
         }}
         validationSchema={validationSchema}
         onSubmit={(values, { resetForm, setSubmitting }) => {
           createJobFn(values, {
             setSubmitting,
             resetForm,
           });
         }}
       >
         {({
           isSubmitting,
           setFieldValue,
           isValid,
         }) => <div className="md:container md:mx-auto mb-12">TODO</div>}
       </Formik>
     </div>
   </section>
 );
};

export default AddJob;

Initial Values: We define the initial form values using initialValues in the Formik component. Each field corresponds to the keys in our validation schema. These values will change as the user inputs data into the form.

Validation: The validationSchema prop connects Formik with the Yup validation we set up earlier. This ensures that when the form is submitted, the data is validated according to the rules specified (e.g., required fields).

Form Submission: The onSubmit prop defines the createJobFn function to handle the form submission. It logs the form values to the console, resets the form, and sets isSubmitting to false to prevent multiple submissions.

Form State Handling: Formik provides useful props (values, errors, touched, isSubmitting, isValid, etc.) to manage and track form states. These can be used to conditionally render content, control button states, and handle form validation and submission more dynamically. Here, we are passing isSubmitting and isValid that we would use in the following steps to check if the user has filled the required fields before they can submit the form - this shows how using Formik gives us the power to control and manage our forms.

Step 5: Constant File For Our Select Fields

Create a constant file that we would map through to get our select options as some of our fields would be a select field.

export const CATEGORIES = [
 { id: "1", name: "Engineering" },
 { id: "2", name: "Marketing" },
 { id: "3", name: "Design" },
];

export const SKILLS = [
 { id: "1", name: "JavaScript" },
 { id: "2", name: "React" },
 { id: "3", name: "CSS" },
];

Step 6: Return Statement

..
 return (
   <section className="w-full nx-auto flex-row min-h-screen flex justify-center items-center bg-gray-100 px-4">
     <div className="bg-white shadow-lg rounded-lg p-8">
       <MultiStepForm steps={steps} currentStep={currentStep} />
       <Formik
         initialValues={{
           jobTitle: "",
   …other fields
         }}
         validationSchema={validationSchema}
         onSubmit={(values, { resetForm, setSubmitting }) => {
  …other fields
           });
         }}
       >
         {({ isSubmitting, isValid }) => (
           <div>
             <Form className="bg-white shadow-lg rounded-lg w-full px-8 max-w-4xl mx-auto">
               {currentStep === 1 && (
                 <div className="flex flex-col mb-2">
                   <div className="mb-4">
                     <label
                       htmlFor="jobTitle"
                       className="block text-gray-700 text-sm font-bold mb-2"
                     >
                       Job Title{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="jobTitle"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="jobTitle"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="flex flex-wrap">
                     <div className="w-full md:w-1/2 md:pr-5 mb-2">
                       <label
                         htmlFor="jobCategory"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Category{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <div className="relative">
                         <Field
                           as="select"
                           name="jobCategory"
                           className="shadow appearance-none capitalize border rounded w-full py-2 px-3 bg-white text-black text-sm leading-tight focus:outline-none focus:shadow-outline"
                         >
                           <option value="" disabled>
                             Select
                           </option>
                           {CATEGORIES?.map((category) => (
                             <option key={category.id} value={category.id}>
                               {category.name}
                             </option>
                           ))}
                         </Field>
                       </div>
                       <ErrorMessage
                         name="jobCategory"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>

                     <div className="w-full md:w-1/2 md:pl-5 mb-2">
                       <label
                         htmlFor="jobSkills"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Skills{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <div className="relative">
                         <Field
                           as="select"
                           name="jobSkills"
                           className="shadow appearance-none capitalize border rounded w-full py-2 px-3 bg-white text-black text-sm leading-tight focus:outline-none focus:shadow-outline"
                         >
                           <option value="" disabled>
                             Select
                           </option>
                           {SKILLS?.map((skill) => (
                             <option key={skill.id} value={skill.id}>
                               {skill.name}
                             </option>
                           ))}
                         </Field>
                       </div>
                       <ErrorMessage
                         name="jobSkills"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>
                   </div>

                   <div className="flex flex-wrap">
                     <div className="w-full md:w-1/2 md:pr-5 mb-2">
                       <label
                         htmlFor="jobSalary"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Salary{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <Field
                         name="jobSalary"
                         type="text"
                         className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                       />
                       <ErrorMessage
                         name="jobSalary"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />{" "}
                     </div>

                     <div className="w-full md:w-1/2 md:pl-5 mb-2">
                       <label
                         htmlFor="jobUrl"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Link{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <Field
                         name="jobUrl"
                         type="text"
                         className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                       />
                       <ErrorMessage
                         name="jobUrl"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="jobDescription"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Job Description{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="jobDescription"
                       type="textarea"
                       as="textarea"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="jobDescription"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>
                 </div>
               )}

               {currentStep === 2 && (
                 <div>
                   <div className="mb-2">
                     <label
                       htmlFor="companyName"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company Name{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companyName"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 capitalize bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companyName"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companyHq"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company HQ
                     </label>
                     <Field
                       name="companyHq"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 capitalize bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companyHq"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysWebsite"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Website{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysWebsite"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysWebsite"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysEmail"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Email{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysEmail"
                       type="email"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysEmail"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysDescription"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Description{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysDescription"
                       type="textarea"
                       as="textarea"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysDescription"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>
                 </div>
               )}

               {currentStep === 3 && (
                 <div className="flex flex-col justify-center text-black">
                   <h1>Thank You.</h1>
                   <h2>The team would review and provide feedback</h2>
                 </div>
               )}

               <div className="flex justify-between p-4">
                 {currentStep === 1 ? (
                   <div></div>
                 ) : (
                   <button
                     onClick={goToPreviousStep}
                     type="button"
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200  hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     Previous
                   </button>
                 )}

                 {currentStep === 1 || currentStep === 2 ? (
                   <button
                     onClick={(e) => {
                       e.preventDefault();
                       goToNextStep();
                     }}
                     type="button"
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200 hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     Next
                   </button>
                 ) : (
                   <button
                     type="submit"
                     disabled={isSubmitting || !isValid}
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200 hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     {isValid ? "Incomplete form" : "Submit"}
                   </button>
                 )}
               </div>
             </Form>
           </div>
         )}
       </Formik>
     </div>
   </section>
 );
};

export default AddJob;

Let's break down the key parts of this return statement, focusing on currentStep === 1, labels, fields, error messages, and the button section.

currentStep === 1:

This block renders the form fields for step 1. The currentStep prop controls which part of the form is shown. When currentStep === 1, it displays input fields like jobTitle, jobCategory, jobSkills, jobSalary, jobUrl, and jobDescription.
This structure allows for multi-step forms, showing different fields depending on the current step of the form.

Labels, Fields, and Error Messages:

Labels:
Each form field includes a element to describe the input. This label is connected to the corresponding field using the htmlFor attribute.
For example:

<label htmlFor="jobTitle" className="block text-gray-700 text-sm font-bold mb-2">
  Job Title <span className="text-red-500">*</span>
</label>

Fields:
Uses the Field component from Formik to create input fields. The name prop links the field to a property in Formik's initialValues. This connection enables Formik to manage the form's state and validation.

<Field
name="jobTitle"
type="text"
className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm"
/>

Error Messages:
The ErrorMessage component is used to display validation errors. name specifies which field's error to display, and component defines the HTML element to render the error message in and then a red text styling.

<ErrorMessage
name="jobTitle"
component="div"
className="!text-red-500 text-xs italic mt-2"
/>

Button Explanation:
There are three buttons in the form, shown conditionally based on the currentStep.

Previous Button
Displayed only when currentStep is not 1. This button allows the user to go back to the previous step:

<button
onClick={goToPreviousStep}
type="button"
className="…"
>
Previous
</button>

Next Button:
Displayed for steps 1 and 2. This button advances the form to the next step:

  <button
    onClick={(e) => {
       e.preventDefault();
        goToNextStep();
     }}
    type="button"
    className="..."
  >
   Next
 </button>

Submit Button:
Displayed when the final step (not 1 or 2) is reached. The button's disabled state is controlled by Formik's isSubmitting and isValid properties so this help us disable the button if the form is already in the process of submission, this prevents duplicate submission or if its invalid i.e if the user does not enter the required fields in the valid format as defined in the validation schema.

Then our button text displays "Incomplete form" if the form is invalid, otherwise, it shows "Submit".

<button
type="submit"
disabled={isSubmitting || !isValid}
className="…"
>
{isValid ? "Incomplete form" : "Submit"}
</button>

That's it, here's the full working code. I hope this gives you some solid information as to how powerful Formik and Yup are in terms of giving you the control to build lightweight forms.

The documentation is very easy to browse through and understand so feel free to check out the documentation to learn more.

Here's the full AddJob Form code below;

import { useState } from "react";
import MultiStepForm from "./components/multi-step-form";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import { CATEGORIES, SKILLS } from "./constants";

const validationSchema = Yup.object({
 jobTitle: Yup.string().required("Job title is required"),
 jobDescription: Yup.string().required("Please describe this role"),
 jobCategory: Yup.string().required("Kindly select a job category"),
 jobSkills: Yup.string().required("Please select skills needed"),
 jobType: Yup.string().required("This is required"),
 jobLocation: Yup.string().required("Please select relevant locations"),
 jobLevel: Yup.string().required("What level is this job?"),
 jobSalary: Yup.string().required("Select a job salary"),
 jobUrl: Yup.string().required("Provide the link for the job"),
 // createdBy: Yup.string(),
 companyName: Yup.string().required("Please provide the name"),
 companyHq: Yup.string(),
 companysWebsite: Yup.string().required("Enter the company's website"),
 companysEmail: Yup.string()
   .email("Invalid email address")
   .required("Enter the company's email"),
 companysDescription: Yup.string().required("What does the company do?"),
});

const AddJob = () => {
 const [currentStep, setCurrentStep] = useState(1);

 const steps = [
   { id: 1, title: "Job Information" },
   { id: 2, title: "Company Information" },
   { id: 3, title: "Submit" },
 ];

 const goToNextStep = () => {
   if (currentStep < steps.length) {
     setCurrentStep(currentStep + 1);
   }
 };

 const goToPreviousStep = () => {
   if (currentStep > 1) {
     setCurrentStep(currentStep - 1);
   }
 };

 const createJobFn = (values: any, { resetForm, setSubmitting }: any) => {
   // Define your createJobFn logic here
   console.log(values);
   resetForm();
   setSubmitting(false);
 };

 return (
   <section className="w-full nx-auto flex-row min-h-screen flex justify-center items-center bg-gray-100 px-4">
     <div className="bg-white shadow-lg rounded-lg p-8">
       <MultiStepForm steps={steps} currentStep={currentStep} />
       <Formik
         initialValues={{
           jobTitle: "",
           jobDescription: "",
           jobCategory: "",
           jobSkills: "",
           jobType: "",
           jobLocation: "",
           jobLevel: "",
           jobSalary: "",
           jobUrl: "",
           // createdBy: "",
           companyName: "",
           companyHq: "",
           companysWebsite: "",
           companysEmail: "",
           companysDescription: "",
         }}
         validationSchema={validationSchema}
         onSubmit={(values, { resetForm, setSubmitting }) => {
           createJobFn(values, {
             setSubmitting,
             resetForm,
           });
         }}
       >
         {({ isSubmitting, isValid }) => (
           <div>
             <Form className="bg-white shadow-lg rounded-lg w-full px-8 max-w-4xl mx-auto">
               {currentStep === 1 && (
                 <div className="flex flex-col mb-2">
                   <div className="mb-4">
                     <label
                       htmlFor="jobTitle"
                       className="block text-gray-700 text-sm font-bold mb-2"
                     >
                       Job Title{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="jobTitle"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="jobTitle"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="flex flex-wrap">
                     <div className="w-full md:w-1/2 md:pr-5 mb-2">
                       <label
                         htmlFor="jobCategory"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Category{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <div className="relative">
                         <Field
                           as="select"
                           name="jobCategory"
                           className="shadow appearance-none capitalize border rounded w-full py-2 px-3 bg-white text-black text-sm leading-tight focus:outline-none focus:shadow-outline"
                         >
                           <option value="" disabled>
                             Select
                           </option>
                           {CATEGORIES?.map((category) => (
                             <option key={category.id} value={category.id}>
                               {category.name}
                             </option>
                           ))}
                         </Field>
                       </div>
                       <ErrorMessage
                         name="jobCategory"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>

                     <div className="w-full md:w-1/2 md:pl-5 mb-2">
                       <label
                         htmlFor="jobSkills"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Skills{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <div className="relative">
                         <Field
                           as="select"
                           name="jobSkills"
                           className="shadow appearance-none capitalize border rounded w-full py-2 px-3 bg-white text-black text-sm leading-tight focus:outline-none focus:shadow-outline"
                         >
                           <option value="" disabled>
                             Select
                           </option>
                           {SKILLS?.map((skill) => (
                             <option key={skill.id} value={skill.id}>
                               {skill.name}
                             </option>
                           ))}
                         </Field>
                       </div>
                       <ErrorMessage
                         name="jobSkills"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>
                   </div>

                   <div className="flex flex-wrap">
                     <div className="w-full md:w-1/2 md:pr-5 mb-2">
                       <label
                         htmlFor="jobSalary"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Salary{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <Field
                         name="jobSalary"
                         type="text"
                         className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                       />
                       <ErrorMessage
                         name="jobSalary"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />{" "}
                     </div>

                     <div className="w-full md:w-1/2 md:pl-5 mb-2">
                       <label
                         htmlFor="jobUrl"
                         className="block text-gray-700 text-sm font-bold"
                       >
                         Job Link{" "}
                         <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                           *
                         </span>
                       </label>
                       <Field
                         name="jobUrl"
                         type="text"
                         className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                       />
                       <ErrorMessage
                         name="jobUrl"
                         component="div"
                         className="!text-red-500 text-xs italic mt-2"
                       />
                     </div>
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="jobDescription"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Job Description{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="jobDescription"
                       type="textarea"
                       as="textarea"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="jobDescription"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>
                 </div>
               )}

               {currentStep === 2 && (
                 <div>
                   <div className="mb-2">
                     <label
                       htmlFor="companyName"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company Name{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companyName"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 capitalize bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companyName"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companyHq"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company HQ
                     </label>
                     <Field
                       name="companyHq"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 capitalize bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companyHq"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysWebsite"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Website{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysWebsite"
                       type="text"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysWebsite"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysEmail"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Email{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysEmail"
                       type="email"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysEmail"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>

                   <div className="mb-2">
                     <label
                       htmlFor="companysDescription"
                       className="block text-gray-700 text-sm font-bold"
                     >
                       Company's Description{" "}
                       <span className="text-red-500 ltr:mr-1 rtl:ml-1">
                         *
                       </span>
                     </label>
                     <Field
                       name="companysDescription"
                       type="textarea"
                       as="textarea"
                       className="shadow appearance-none border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline"
                     />
                     <ErrorMessage
                       name="companysDescription"
                       component="div"
                       className="!text-red-500 text-xs italic mt-2"
                     />
                   </div>
                 </div>
               )}

               {currentStep === 3 && (
                 <div className="flex flex-col justify-center text-black">
                   <h1>Thank You.</h1>
                   <h2>The team would review and provide feedback</h2>
                 </div>
               )}

               <div className="flex justify-between p-4">
                 {currentStep === 1 ? (
                   <div></div>
                 ) : (
                   <button
                     onClick={goToPreviousStep}
                     type="button"
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200  hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     Previous
                   </button>
                 )}

                 {currentStep === 1 || currentStep === 2 ? (
                   <button
                     onClick={(e) => {
                       e.preventDefault();
                       goToNextStep();
                     }}
                     type="button"
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200 hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     Next
                   </button>
                 ) : (
                   <button
                     type="submit"
                     disabled={isSubmitting || !isValid}
                     className="px-6 py-2 min-w-[120px] text-center text-white bg-purple-900 border border-purple-900 rounded active:text-purple-200 hover:bg-transparent hover:text-purple-900 focus:outline-none"
                   >
                     {isValid ? "Incomplete form" : "Submit"}
                   </button>
                 )}
               </div>
             </Form>
           </div>
         )}
       </Formik>
     </div>
   </section>
 );
};

export default AddJob;

Conclusion:
By using Formik and Yup, handling complex multi-step forms becomes much more manageable. Their ability to handle dynamic fields, conditional logic, and schema-based validation reduces the need for verbose custom code, letting you focus on building an excellent user experience.

How to Use Tiptap Rich Text Editor with Next.js and Tailwind CSS: A Simple Guide

Theresa Okoro — Fri, 30 Aug 2024 11:37:13 +0000

If you want a functional Rich Text Editor (RTE) that is simple to set up and use, you’ve come to the right place.

Tiptap is a headless editor framework with an open source core that allows you to build and customise your rich text editor effortlessly. The great thing about it is that it already gives you the essentials without requiring you to understand the low-level details making it an excellent choice for modern web applications.

I went on a rich text editor gold search and everywhere I searched, someone recommended TipTap as the top rich text editor. I used it, loved it, ran into some errrmm(not issues but my fuzzy brain did not necessary know certain things and how it should be adjusted especially if you are using TailwindCSS) so I'm here to give you the guide I wish I had.

WHY TIPTAP:

Ease of Use: Intuitive and easy to integrate into your project.
Customizable: Add or remove features as needed without delving into complex configurations.
Flexible Styling: Customize the styling of your Tiptap editor to create a unique design with minimal effort.
Easy-to-Use Documentation: Tiptap's documentation is straightforward and easy to follow.

Without further ado, let’s get into it.

SET UP A BASIC TIPTAP EDITOR

Create a project (optional)

If you don’t have an existing project, create one using the following command:

#create a project
npx create-next-app our-tiptap-project

# change directory
cd our-tiptap-project

Install dependencies

We need to install three packages: @tiptap/react, @tiptap/pm and @tiptap/starter-kit which includes all the extensions you need to get started quickly.

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

Create a Tiptap Component

In your project, create a new component file called Tiptap.jsx or Tiptap.tsx (if you're using TypeScript).

'use client'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Welcome to Tiptap</p>',
  })
  return <EditorContent editor={editor} />
}
export default Tiptap

Add it to your app

Add your Tiptap component in your index file or your desired file.

import Tiptap from '../components/Tiptap'
export default function Home() {
  return <Tiptap />
}

Run “npm run dev” and go to your localhost to see the editor in action - open http://localhost:3000/

Welcome to the TipTap world, but hey, we can do more than that basic setup.

EXTENDING THE EDITOR WITH MORE FEATURES

Now, let’s make our TipTap editor more robust with fun things like making your text bold, italic, adding header, bullet list and ordered list. You can also easily add more functionality by looking at the doc.

INDEX.TSX

On our Tiptap component, we’re going to use two props and use useState to manage those props.

The initial content the user types in the input field will be stored in the jobDescription and the changes would be saved via setJobDescription]

  const [jobDescription, setJobDescription] = useState("");
   <Tiptap
    editorContent={jobDescription}
    onChange={setJobDescription}
  />

TIPTAP.TSX

Step 1: Define Your Props (TypeScript Only)

Add the types for your props if you're using TypeScript:

interface TipTapProps {
  editorContent: string;
  onChange: (content: string) => void;
}

Step 2: Initialise the Editor

This is where we can customise our rich text editor by adding the nodes (bulletlist, code block, emoji, heading, ordered list e.t.c), marks (bold, italics, strike, underline e.t.c) that we want to add to our app.

The StarterKit gives you a lot out of the box like bold, italics e.t.c, and in Tiptaps favourites words “Don’t bend it, extend it”, you can extend and add other items that you want like heading, bullet list, ordered list and so much more like we did below.

Content is the description we got from the input field a.k.a what the user types into the input field. You can also style the editor using editor props like we did below (so get your styling wizardry up or you can use my style below - easy and simple). The next is onUpdate, this simply helps us update what the user sees when they click on the button, this calls onChange and takes whatever is in the editor and convert it to HTML.

Are you still with me? I hope so, I told you that Tiptap gives you the ability to customise your Rich Text Editor easily so if you want to add Heading, you can configure it to the extensions like we did below, HTML attributes helps you to add class and to specify the levels you want (H1, H2 - I just used H2 here to simplify this).

We also specify in the below example, if the editor does not exist, we should not render the toolbar therefore returning “null”

const Tiptap = ({ editorContent, onChange }: TipTapProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Heading.configure({
        HTMLAttributes: {
          class: "text-xl font-bold capitalize",
          levels: [2],
        },
      }),
      ListItem,
      BulletList.configure({
        HTMLAttributes: {
          class: "list-disc ml-2",
        },
      }),
      OrderedList.configure({
        HTMLAttributes: {
          class: "list-decimal ml-2",
        },
      }),
    ],
    immediatelyRender: false,
    editorProps: {
      attributes: {
        class:
          "shadow appearance-none min-h-[150px] border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline",
      },
    },
    content: editorContent,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
  });
  if (!editor) {
    return null;
  }
return (TODO)
export default Tiptap;

STEP 3:

Now, let’s focus on what we would return.

Using the bold button as an example, if the button is clicked, we are telling the editor to use the chain method to confirm the focus to be on the bold button and to make the selected text bold and run it.

Now, lets add an active class to bold to give it a grey background when Active and remove the grey background when Inactive and don’t forget to specify that this is a button type.

Then add the editor to the EditorContent.

That’s the logic that can be applied to others.

 return (
    <div className="flex flex-col justify-stretch min-h-[200px] border rounded border-b-0">
      <div className="flex items-center gap-2 mb-2">
        {/* Bold Button */}
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBold().run()}
          className={`p-2 rounded ${
            editor.isActive("bold") ? "bg-gray-200" : ""
          }`}
          title="Bold (Ctrl+B)"
        >
          <b>B</b>
        </button>
        {/* Italic Button */}
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={`p-2 rounded ${
            editor.isActive("italic") ? "bg-gray-200" : ""
          }`}
          title="Italic (Ctrl+I)"
        >
          <i>I</i>
        </button>
        {/* Heading */}
        <button
          type="button"
          onClick={() =>
            editor.chain().focus().toggleHeading({ level: 2 }).run()
          }
          className={
            editor.isActive("heading", { level: 2 }) ? "is-active" : ""
          }
        >
          <Image
            src="/heading2.svg"
            alt="Heading 2"
            width={10}
            height={10}
            className="h-4 w-4"
          />
        </button>
        {/* Heading */}
        {/* Bullet List Button */}
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleBulletList().run()}
          className={`p-2 rounded ${
            editor.isActive("bulletList") ? "bg-gray-200" : ""
          }`}
          title="Bullet List"
        >
          <Image
            src="/bullet-list.svg"
            alt="Bullet list"
            width={10}
            height={10}
            className="h-4 w-4"
          />
        </button>
        {/* Ordered List Button */}
        <button
          type="button"
          onClick={() => editor.chain().focus().toggleOrderedList().run()}
          className={`p-2 rounded ${
            editor.isActive("orderedList") ? "bg-gray-200" : ""
          }`}
          title="Ordered List"
        >
          <Image
            src="/numbered-list.svg"
            alt="Numberedlist"
            width={10}
            height={10}
            className="h-4 w-4"
          />
        </button>
      </div>
      {/* Editor Content */}
      <EditorContent editor={editor} />
    </div>
  );

Step 4: Extend Your Editor with More Extensions

Some extensions, such as Heading, BulletList, and others, require installation to be used. Be sure to check the documentation for detailed instructions on how to install and integrate them. Below are some useful links:

Heading Extension Documentation

BulletList Extension Documentation

ListItem Extension Documentation

Additional Notes:

Heading Configuration: Simply installing and using the Heading extension won’t work out of the box. You’ll need to configure it and apply the necessary styles, as demonstrated in the example.
Tailwind CSS Integration: If you're using Heading, BulletList, and OrderedList with Tailwind CSS, you need to install the Tailwind Typography plugin. To make the listings and headings work, add the below configuration to your Extensions array (look at the full code example if you are confused). This helps to ensure that these elements render correctly. Here's a useful StackOverflow link that can guide you through the process.

Heading.configure({
        HTMLAttributes: {
          class: "text-xl font-bold capitalize",
          levels: [2],
        },
      }),
      BulletList.configure({
        HTMLAttributes: {
          class: "list-disc ml-2",
        },
      }),
      OrderedList.configure({
        HTMLAttributes: {
          class: "list-decimal ml-2",
        },
      }),

Here’s the full working code, feel free to customise and let me know what you think via the comment section.

import { useEditor, EditorContent } from "@tiptap/react";

import StarterKit from "@tiptap/starter-kit";

import BulletList from "@tiptap/extension-bullet-list";

import ListItem from "@tiptap/extension-list-item";

import OrderedList from "@tiptap/extension-ordered-list";

import Heading from "@tiptap/extension-heading";

import Image from "next/image";

interface TipTapProps {

  editorContent: string;

  onChange: (content: string) => void;

}

const Tiptap = ({ editorContent, onChange }: TipTapProps) => {

  const editor = useEditor({

    extensions: [

      StarterKit,

      ListItem,

      Heading.configure({

        HTMLAttributes: {

          class: "text-xl font-bold capitalize",

          levels: [2],

        },

      }),

      BulletList.configure({

        HTMLAttributes: {

          class: "list-disc ml-2",

        },

      }),

      OrderedList.configure({

        HTMLAttributes: {

          class: "list-decimal ml-2",

        },

      }),

    ],

    immediatelyRender: false,

    editorProps: {

      attributes: {

        class:

          "shadow appearance-none min-h-[150px] border rounded w-full py-2 px-3 bg-white text-black text-sm mt-0 md:mt-3 leading-tight focus:outline-none focus:shadow-outline",

      },

    },

    content: editorContent,

    onUpdate: ({ editor }) => {

      onChange(editor.getHTML());

    },

  });

  if (!editor) {

    return null;

  }

  return (

    <div className="flex flex-col justify-stretch min-h-[200px] border rounded border-b-0">

      <div className="flex items-center gap-2 mb-2">

        {/* Bold Button /}

        <button

          type="button"

          onClick={() => editor.chain().focus().toggleBold().run()}

          className={p-2 rounded ${

            editor.isActive("bold") ? "bg-gray-200" : ""

          }}

          title="Bold (Ctrl+B)"

        >

          <b>B</b>

        </button>

        {/ Italic Button /}

        <button

          type="button"

          onClick={() => editor.chain().focus().toggleItalic().run()}

          className={p-2 rounded ${

            editor.isActive("italic") ? "bg-gray-200" : ""

          }}

          title="Italic (Ctrl+I)"

        >

          <i>I</i>

        </button>

        {/ Heading /}

        <button

          type="button"

          onClick={() =>

            editor.chain().focus().toggleHeading({ level: 2 }).run()

          }

          className={

            editor.isActive("heading", { level: 2 }) ? "is-active" : ""

          }

        >

          <Image

            src="/heading2.svg"

            alt="Heading 2"

            width={10}

            height={10}

            className="h-4 w-4"

          />

        </button>

        {/ Heading /}

        {/ Bullet List Button /}

        <button

          type="button"

          onClick={() => editor.chain().focus().toggleBulletList().run()}

          className={p-2 rounded ${

            editor.isActive("bulletList") ? "bg-gray-200" : ""

          }}

          title="Bullet List"

        >

          <Image

            src="/bullet-list.svg"

            alt="Bullet list"

            width={10}

            height={10}

            className="h-4 w-4"

          />

        </button>

        {/ Ordered List Button /}

        <button

          type="button"

          onClick={() => editor.chain().focus().toggleOrderedList().run()}

          className={p-2 rounded ${

            editor.isActive("orderedList") ? "bg-gray-200" : ""

          }}

          title="Ordered List"

        >

          <Image

            src="/numbered-list.svg"

            alt="Numberedlist"

            width={10}

            height={10}

            className="h-4 w-4"

          />

        </button>

      </div>

      {/ Editor Content */}

      <EditorContent editor={editor} />

    </div>

  );

};

export default Tiptap;

Wrapping Up:

Now that you’ve set up and customized your Tiptap Rich Text Editor, feel free to explore more extensions and adjust them to your needs. This guide provides a basic understanding, but the possibilities are endless with Tiptap. Whether you want to add custom nodes, marks, or even your own extensions, the documentation is your best friend.

If you have any questions, feel free to drop them in the comments. I hope this guide was helpful in getting you started with Tiptap in your Next.js and Tailwind CSS project. Happy coding!