Custom Component API Reference

Detailed description of all APIs available for custom component development.

Basic Types for Custom Components

CustomComponentRenderProps

All custom components receive properties through the CustomComponentRenderProps type:

import { CustomComponentRenderProps } from '@hops/custom-component';

interface OwnProps {
  // Custom properties
  label: string;
  placeholder: string;
}

function MyComponent(props: CustomComponentRenderProps<OwnProps>): ReactElement {
  // Component implementation
}

CustomComponentRenderProps includes user-defined properties and may also include additional internal properties:

• name: string the name of the component
• isHidden: boolean | undefined: whether the component is hidden or not

Hooks

useComponentState

A hook that manages component state and makes it accessible externally.

Type Signature:

function useComponentState<T>(name: string, initialValue: T): [T, (value: T) => void];

Parameters:

• name: Unique identifier for the state (string)
• initialValue: Initial value

Return Value:

• An array containing the current state value and a function to update the state

Usage Example:

const [value, setValue] = useComponentState<string>('inputValue', '');
const [numberValue, setNumberValue] = useComponentState<number>(10, '');

// Update state
setValue('New value');
setNumberValue((value) => value + 1);

useLogger

A hook for logging within components. Useful for development and debugging.

Type Signature:

function useLogger(): Logger;

interface Logger {
  trace(message: string): void;
  debug(message: string): void;
  info(message: string): void;
  warn(message: string): void;
  error(message: string): void;
}

Return Value:

• A Logger object that provides logging methods

Usage Example:

const logger = useLogger();

// Output logs
logger.trace('Detailed log message');
logger.debug('Debug message');
logger.info('Info message');
logger.warn('Warning message');
logger.error('Error message');

Supported Libraries and Versions

The following libraries can be used in custom components:

Library	Version	Description
React	18.2.0	UI component library
React DOM	18.2.0	React's DOM rendering library
@hops/design-system	-	Hops design system components
@hops/custom-component	-	Custom component API

note

Please contact the Hops team(contact@hopsoffice.com) if you need to use other external libraries.