prefer-local-portal-component

Prefer a local Portal component over direct createPortal(...) calls.

Rule details Suggestion

This rule looks for createPortal calls from @rbxts/react-roblox or react-dom and reports them when the project already has a matching local Portal component.

If the current file already imports that local component, the rule can replace the call with JSX. If the project has no matching local component, or the rule cannot tell which one to use, it does nothing.

Examples

Incorrect

Direct portal call

import Portal from "../components/portal";
import { createPortal } from "@rbxts/react-roblox";

export function Example(target: Instance) {
  return createPortal(<frame />, target);
}

Correct

Local wrapper component

import Portal from "../components/portal";

export function Example(target: Instance) {
  return <Portal target={target}><frame /></Portal>;
}

What it checks

Source	Supported form
`@rbxts/react-roblox`	`createPortal(children, target)`
`react-dom`	`createPortal(children, container)`
`react-dom` or `@rbxts/react-roblox` namespace import	`ReactDOM.createPortal(children, target)`

prefer-context-stack Moves repeated provider trees behind a local component

require-react-display-names Keeps shared component wrappers easier to debug