Components API Reference

Complete reference for all components available in Flowfull Client packages.

BridgeView

Conditional rendering based on authentication and user type.

Available in: @pubflow/react, @pubflow/react-native, @pubflow/nextjs

Props

interface BridgeViewProps {
  children: React.ReactNode;
  allowedTypes?: string | string[];
  fallback?: React.ReactNode;
  loadingComponent?: React.ReactNode;
  onUnauthorized?: () => void;
  instanceId?: string;
}

Prop	Type	Description
children	React.ReactNode	Content to render when authorized
allowedTypes	string | string[] (optional)	Allowed user types
fallback	React.ReactNode (optional)	Content to render when unauthorized
loadingComponent	React.ReactNode (optional)	Loading state component
onUnauthorized	() => void (optional)	Callback when unauthorized
instanceId	string (optional)	Pubflow instance ID

Example

import { BridgeView } from '@pubflow/react';

function AdminPanel() {
  return (
    <BridgeView
      allowedTypes={['admin', 'superadmin']}
      fallback={<div>Access Denied</div>}
      loadingComponent={<div>Loading...</div>}
    >
      <div>Admin Content</div>
    </BridgeView>
  );
}

BridgeForm

Form component with automatic submission and validation.

Available in: @pubflow/react, @pubflow/react-native, @pubflow/nextjs

Props

interface BridgeFormProps {
  endpoint: string;
  method: 'POST' | 'PUT' | 'PATCH' | 'DELETE';
  onSuccess?: (data: any) => void;
  onError?: (error: Error) => void;
  children: React.ReactNode;
  instanceId?: string;
}

Prop	Type	Description
endpoint	string	API endpoint
method	'POST' | 'PUT' | 'PATCH' | 'DELETE'	HTTP method
onSuccess	(data: any) => void (optional)	Success callback
onError	(error: Error) => void (optional)	Error callback
children	React.ReactNode	Form fields
instanceId	string (optional)	Pubflow instance ID

Example

import { BridgeForm } from '@pubflow/react';

function CreateUserForm() {
  return (
    <BridgeForm
      endpoint="/api/users"
      method="POST"
      onSuccess={(data) => console.log('Created:', data)}
      onError={(error) => console.error('Error:', error)}
    >
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <button type="submit">Create</button>
    </BridgeForm>
  );
}

BridgeTable

Table component with automatic data fetching and pagination.

Available in: @pubflow/react, @pubflow/nextjs

Props

interface BridgeTableProps<T> {
  endpoint: string;
  columns: ColumnDef<T>[];
  pageSize?: number;
  onRowClick?: (row: T) => void;
  instanceId?: string;
}

interface ColumnDef<T> {
  key: keyof T;
  header: string;
  render?: (value: any, row: T) => React.ReactNode;
}

Prop	Type	Description
endpoint	string	API endpoint
columns	ColumnDef<T>[]	Column definitions
pageSize	number (optional)	Items per page (default: 10)
onRowClick	(row: T) => void (optional)	Row click handler
instanceId	string (optional)	Pubflow instance ID

Example

import { BridgeTable } from '@pubflow/react';

interface User {
  id: string;
  name: string;
  email: string;
}

function UserTable() {
  return (
    <BridgeTable<User>
      endpoint="users"
      columns={[
        { key: 'name', header: 'Name' },
        { key: 'email', header: 'Email' },
        {
          key: 'id',
          header: 'Actions',
          render: (id) => <button>Edit</button>
        }
      ]}
      pageSize={20}
      onRowClick={(user) => console.log('Clicked:', user)}
    />
  );
}

BridgeList

List component for React Native with pull-to-refresh and infinite scroll.

Available in: @pubflow/react-native

Props

interface BridgeListProps<T> {
  endpoint: string;
  renderItem: (item: T) => React.ReactNode;
  keyExtractor?: (item: T) => string;
  pageSize?: number;
  onItemPress?: (item: T) => void;
  instanceId?: string;
}

Prop	Type	Description
endpoint	string	API endpoint
renderItem	(item: T) => React.ReactNode	Item renderer
keyExtractor	(item: T) => string (optional)	Key extractor
pageSize	number (optional)	Items per page
onItemPress	(item: T) => void (optional)	Item press handler
instanceId	string (optional)	Pubflow instance ID

Example

import { BridgeList } from '@pubflow/react-native';
import { Text, TouchableOpacity } from 'react-native';

function UserList() {
  return (
    <BridgeList
      endpoint="users"
      renderItem={(user) => (
        <TouchableOpacity>
          <Text>{user.name}</Text>
          <Text>{user.email}</Text>
        </TouchableOpacity>
      )}
      keyExtractor={(user) => user.id}
      pageSize={20}
    />
  );
}

OfflineIndicator

Shows network status indicator (React Native only).

Available in: @pubflow/react-native

Example

import { OfflineIndicator } from '@pubflow/react-native';

function App() {
  return (
    <>
      <OfflineIndicator />
      <YourApp />
    </>
  );
}

Next Steps

• Hooks API - Hooks reference
• Types API - TypeScript types reference