DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on

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/@thinkthroo

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

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay