DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Edited on • Originally published at thinkthroo.com

ReactPortal type in TipTap source code

In this article, we will review the ReactPortal type in TipTap source code.

The below code is picked from tiptap/packages/react/src/Editor.js

import { Editor } from '@tiptap/core'
import { ReactPortal } from 'react'

import { ReactRenderer } from './ReactRenderer.js'

export type EditorWithContentComponent = Editor & { contentComponent?: ContentComponent | null }
export type ContentComponent = {
  setRenderer(id: string, renderer: ReactRenderer): void;
  removeRenderer(id: string): void;
  subscribe: (callback: () => void) => () => void;
  getSnapshot: () => Record<string, ReactPortal>;
  getServerSnapshot: () => Record<string, ReactPortal>;
}
Enter fullscreen mode Exit fullscreen mode

ReactPortal is used as a type here in getSnapshot. This getSnapshot function is supposed to return a value of type Record<string, ReactPortal>. Similar declaration is found for getServerSnapshot.

I have seen this “portal” related code in the wild before but I could not recall. When I googled “Portal in React”, I found createPortal in React documentation.

Image description

But is createPortal related to ReactPortal type? what is createPortal anyway? createPortal lets you render some children into a different part of the DOM.

Below is a simple example picked from React docs.

import { createPortal } from 'react-dom';

export default function MyComponent() {
  return (
    <div style={{ border: '2px solid black' }}>
      <p>This child is placed in the parent div.</p>
      {createPortal(
        <p>This child is placed in the document body.</p>,
        document.body
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

I liked this example related to showing modal more.

I really was hoping to find that this function returns a value of type ReactPortal. I mean, it’s got matching word “Portal” but to my surprise, in the documentation it is mentioned that createPortal returns a value of type, ReactNode.

It is also worth mentioning that createPortal is imported from react-dom, whereas ReactPortal is imported from react. createPortal is a function and ReactPortal is a type.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

References:

  1. https://github.com/ueberdosis/tiptap/blob/develop/packages/react/src/Editor.ts#L2

  2. https://react.dev/reference/react-dom/createPortal

  3. https://react.dev/reference/react-dom/createPortal#rendering-a-modal-dialog-with-a-portal

  4. https://react.dev/reference/react-dom/createPortal#returns

Sentry image

Make it make sense

Only the context you need to fix your broken code with Sentry.

Start debugging →

Top comments (0)

Image of PulumiUP 2025

Let's talk about the current state of cloud and IaC, platform engineering, and security.

Dive into the stories and experiences of innovators and experts, from Startup Founders to Industry Leaders at PulumiUP 2025.

Register Now

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay