Prefer Local Portal Component

SuggestionAuto-fixable

small-rules/prefer-local-portal-component

Prefer a local Portal component over direct createPortal calls when the project already defines one.

Diagnostic Messages

preferPortalComponent

Use the local `Portal` component instead of calling `createPortal` directly.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/prefer-local-portal-component": "error"
  }
}

Examples

Direct portal call with local component

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

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

After auto-fix

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

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

Portal call without local component

import { createPortal } from "@rbxts/react-roblox";

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

Related Rules

Prefer Context StackRelatedLocal wrapper components for nested providers/portals/padding are the same composition move.Prefer Padding ComponentsRelatedPrefer named local UI wrappers over repeating low-level createPortal/uipadding patterns.