or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

content-manager.mdfeatures.mdhooks.mdindex.mdtypes.mdui-components.mdutilities.md
tile.json

tessl/npm-strapi--helper-plugin

Helper library for Strapi plugins development providing React components, hooks, utilities, and TypeScript types for building plugin interfaces

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@strapi/helper-plugin@4.25.x

To install, run

npx @tessl/cli install tessl/npm-strapi--helper-plugin@4.25.0

index.mddocs/

Strapi Helper Plugin

@strapi/helper-plugin is a comprehensive development toolkit for building Strapi plugins, offering a rich collection of React components, hooks, utilities, and TypeScript types specifically designed for the Strapi ecosystem. It provides essential UI components, powerful hooks for API interactions, content management utilities, and specialized tools for plugin development including translation helpers, error handling, and RBAC integration.

Package Information

  • Package Name: @strapi/helper-plugin
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @strapi/helper-plugin

Core Imports

import { 
  useFetchClient, 
  useNotification, 
  CheckPermissions,
  Form,
  DynamicTable 
} from "@strapi/helper-plugin";

For CommonJS:

const { 
  useFetchClient, 
  useNotification, 
  CheckPermissions,
  Form,
  DynamicTable 
} = require("@strapi/helper-plugin");

Basic Usage

import { 
  useFetchClient, 
  useNotification, 
  CheckPermissions,
  Form 
} from "@strapi/helper-plugin";

function MyPluginComponent() {
  const { get, post } = useFetchClient();
  const toggleNotification = useNotification();
  
  const handleSubmit = async (data) => {
    try {
      await post('/api/my-endpoint', data);
      toggleNotification({
        type: 'success',
        message: 'Data saved successfully'
      });
    } catch (error) {
      toggleNotification({
        type: 'warning',
        message: 'Failed to save data'
      });
    }
  };

  return (
    <CheckPermissions permissions={[{ action: 'create', subject: 'plugin::my-plugin.entity' }]}>
      <Form onSubmit={handleSubmit}>
        {/* Form content */}
      </Form>
    </CheckPermissions>
  );
}

Architecture

The @strapi/helper-plugin is organized around several key architectural patterns:

  • Component Library: Pre-built React components for common UI patterns (forms, tables, dialogs, permission gates)
  • Hook System: React hooks for common operations (API calls, notifications, permissions, state management)
  • Utility Functions: Pure functions for data transformation, validation, error handling, and URL manipulation
  • Context Providers: React contexts for app-level state management (authentication, permissions, content management)
  • Type System: Comprehensive TypeScript types for Strapi-specific data structures and API patterns
  • URL State Management: Components and hooks that synchronize state with URL parameters for deep linking

Capabilities

UI Components

Core React components for building consistent plugin interfaces including forms, tables, dialogs, navigation, and permission-based rendering.

// Form components (deprecated - use Formik directly)
type FormProps = Omit<FormikFormProps, 'noValidate'>;
function Form(props: FormProps): JSX.Element;

// Permission components  
interface CheckPermissionsProps {
  permissions?: PermissionToCheckAgainst[];
  children: React.ReactNode;
}

type PermissionToCheckAgainst = Pick<Permission, 'action' | 'subject'> &
  Partial<Pick<Permission, 'actionParameters' | 'conditions' | 'properties'>>;
function CheckPermissions(props: CheckPermissionsProps): JSX.Element;

// Table components
interface DynamicTableProps<
  TRows extends { id: Entity.ID } = { id: Entity.ID },
  THeader extends TableHeader = TableHeader
> extends Pick<EmptyBodyTableProps, 'action'>,
    Pick<DSTableProps, 'footer'> {
  children?: React.ReactNode;
  contentType: string;
  components?: {
    ConfirmDialogDeleteAll?: React.ElementType;
    ConfirmDialogDelete?: React.ElementType;
  };
  headers?: TableHeadProps<THeader>['headers'];
  isLoading?: boolean;
  onConfirmDeleteAll?: (ids: Array<TRows['id']>) => Promise<void>;
  onConfirmDelete?: (id: TRows['id']) => Promise<void>;
  rows?: Array<TRows>;
  withBulkActions?: boolean;
  withMainAction?: boolean;
  renderBulkActionsBar?: (props: {
    selectedEntries: Array<string | number>;
    clearSelectedEntries: () => void;
  }) => React.ReactNode;
}
function DynamicTable<TRows extends { id: Entity.ID }>(props: DynamicTableProps<TRows>): JSX.Element;

UI Components

Hooks

React hooks for common plugin functionality including API communication, state management, permissions, and user interactions.

// HTTP client hook
type FetchClient = {
  get: <TData = any, R = AxiosResponse<TData>, TSend = any>(
    url: string,
    config?: AxiosRequestConfig<TSend>
  ) => Promise<R>;
  put: <TData = any, R = AxiosResponse<TData>, TSend = any>(
    url: string,
    data?: TSend,
    config?: AxiosRequestConfig<TSend>
  ) => Promise<R>;
  post: <TData = any, R = AxiosResponse<TData>, TSend = any>(
    url: string,
    data?: TSend,
    config?: AxiosRequestConfig<TSend>
  ) => Promise<R>;
  del: <TData = any, R = AxiosResponse<TData>, TSend = any>(
    url: string,
    config?: AxiosRequestConfig<TSend>
  ) => Promise<R>;
};
function useFetchClient(): FetchClient;

// Notification hook
interface NotificationConfig {
  blockTransition?: boolean;
  link?: NotificationLink;
  message?: string | TranslationMessage;
  onClose?: () => void;
  timeout?: number;
  title?: string | TranslationMessage;
  type?: 'info' | 'warning' | 'softWarning' | 'success';
}

interface NotificationLink {
  label: string | MessageDescriptor;
  target?: string;
  url: string;
}
function useNotification(): (config: NotificationConfig) => void;

// Permission hook
interface RBACReturn {
  isLoading: boolean;
  allowedActions: AllowedActions;
  setIsLoading: () => void;
}
function useRBAC(
  permissionsToCheck: Record<string, Permission[]>, 
  passedPermissions?: Permission[]
): RBACReturn;

type AllowedActions = Record<string, boolean>;

Hooks

Content Manager

Context providers and utilities for managing content types, relations, and CRUD operations within the Strapi admin interface.

interface CMEditViewDataManagerContextValue {
  initialData: ContentType;
  modifiedData: ContentType;
  formErrors: Record<string, TranslationMessage>;
  layout?: Schema.CollectionType | Schema.SingleType;
  isCreatingEntry: boolean;
  hasDraftAndPublish: boolean;
  onChange?: (payload: { target: { name: string; type: string; value: any } }) => void;
  onPublish?: () => Promise<unknown>;
  onUnpublish?: () => Promise<unknown>;
}
function useCMEditViewDataManager(): CMEditViewDataManagerContextValue;

interface ContentType {
  id?: number | string;
  createdAt?: string;
  updatedAt?: string;
  publishedAt?: string;
  [key: string]: any;
}

Content Manager

Features

Context providers for core application features including app information, notifications, permissions, tracking, and plugin extensibility.

// App context
interface AppInfoContextValue {
  shouldUpdateStrapi: boolean;
  latestStrapiReleaseTag: string;
  setUserDisplayName: (name: string) => void;
}
function useAppInfo(): AppInfoContextValue;

// Notification context
function useNotification(): (config: NotificationConfig) => void;

// RBAC context  
function useRBAC(permissions: Array<{ action: string; subject: string }>): RBACReturn;

// Tracking context
interface TrackingEvent {
  name: string;
  properties?: Record<string, any>;
}
function useTracking(): { trackUsage: (event: TrackingEvent) => void };

Features

Utilities

Utility functions for common operations including API error handling, data transformation, file operations, internationalization, and authentication.

// Error handling
function getAPIInnerErrors(error: any): Array<{ id: string; defaultMessage: string }>;
function normalizeAPIError(error: any, formatMessage: (descriptor: any) => string): any;

// HTTP utilities  
function getFetchClient(baseURL?: string): Promise<any>;
function request(url: string, options?: any): Promise<any>;

// Data transformation
function formatContentTypeData(data: any, contentType: any): any;
function contentManagementUtilRemoveFieldsFromData(data: any, fieldsToRemove: string[]): any;

// UI utilities
function pxToRem(value: number): string;
function setHexOpacity(hex: string, opacity: number): string;
function getFileExtension(filename: string): string;

Utilities

Types

Core TypeScript interfaces and types for Strapi-specific data structures, API responses, and component props.

interface TranslationMessage {
  id: string;
  defaultMessage: string;
  values?: Record<string, any>;
}

interface FilterData {
  name: string;
  metadatas: {
    label: string;
    customOperators?: Array<{ intlLabel: { id: string; defaultMessage: string }; value: string }>;
    customInput?: React.ComponentType;
    options?: Array<{ label?: string; customValue: string }>;
    uid?: string;
  };
  fieldSchema: {
    type: string;
    options?: string[];
    mainField?: { name: string; type?: string };
  };
  trackedEvent?: TrackingEvent;
}

type ApiError = 
  | ApplicationError
  | ForbiddenError  
  | NotFoundError
  | ValidationError
  | UnauthorizedError;

Types