# yatra/3.0.16/resources/js/components/ui/conditional-render.tsx

Yatra – Travel Booking & Tour Operator Software, version 3.0.16. 65 lines.

- Page: https://pluginprobe.com/plugins/yatra/3.0.16/code/resources/js/components/ui/conditional-render.tsx
- Raw: https://pluginprobe.com/plugins/yatra/3.0.16/raw/resources/js/components/ui/conditional-render.tsx
- Modified: 2026-04-14T03:47:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/yatra/3.0.16/code/resources/js/components/ui/conditional-render.tsx#L10-L20`.

```tsx
/**
 * Conditional Render Component
 * Renders children based on permissions and Pro version status
 * Supports extensibility for Pro version modifications
 */

import React from "react";
import { usePermissions } from "../../hooks/usePermissions";

interface ConditionalRenderProps {
  children: React.ReactNode;
  capability?: string;
  role?: string;
  requirePro?: boolean;
  fallback?: React.ReactNode;
  className?: string;
}

/**
 * Conditionally renders content based on permissions, roles, or Pro status
 *
 * @example
 * <ConditionalRender capability="yatra_edit_trips">
 *   <EditButton />
 * </ConditionalRender>
 *
 * @example
 * <ConditionalRender requirePro fallback={<UpgradeMessage />}>
 *   <ProFeature />
 * </ConditionalRender>
 */
export const ConditionalRender: React.FC<ConditionalRenderProps> = ({
  children,
  capability,
  role,
  requirePro = false,
  fallback = null,
  className = "",
}) => {
  const { can, hasRole, isPro } = usePermissions();

  // Check if should render
  let shouldRender = true;

  if (capability && !can(capability)) {
    shouldRender = false;
  }

  if (role && !hasRole(role)) {
    shouldRender = false;
  }

  if (requirePro && !isPro) {
    shouldRender = false;
  }

  if (!shouldRender) {
    return <>{fallback}</>;
  }

  return <div className={className}>{children}</div>;
};

export default ConditionalRender;

```