hcomp/dist/index.d.ts

HComp is a helper component library that aims to improve code readability and make your life easier.

import React$1, { ReactNode, CSSProperties } from 'react';

/**
 * A component that conditionally renders content based on the `when` prop, and you can use it inside Switch component as Switch.Case
 *
 * When `when` is `true`, it renders the `children` prop.
 *
 * @example
 * ```tsx
 * <Switch.Case when={condition}>
 *   <Content />
 * </Switch.Case>
 * ```
 *
 * @param when - Determines whether to show or hide the content.
 * @param children - The content to be displayed when `when` is `true`.
 * @returns The rendered content based on the `when` prop.
 */
declare const Case: ({ when, children }: ICaseProps) => React$1.JSX.Element | null;

/**
 * Props for the `Show` component.
 */
interface IShowProps {
    /**
     * Determines whether to show or hide the content.
     */
    when: boolean;
    /**
     * The content to be displayed when `when` is `false`.
     */
    fallback?: ReactNode;
    /**
     * The content to be displayed when `when` is `true`.
     */
    children: ReactNode;
}
/**
 * Props for the `For` component.
 */
interface IForProps<T> {
    /**
     * An array of items to iterate over.
     */
    items?: T[];
    /**
     * The content to be displayed when `items` is empty or not provided.
     */
    fallback?: ReactNode;
    /**
     * A function that receives each item of type `T` and its index,
     * and returns the content to be rendered for that item.
     */
    children: (item: T, index?: number) => ReactNode;
}
/**
 * The properties for the `Case` component.
 */
interface ICaseProps {
    /**
     * Determines whether to show or hide the content.
     */
    when?: boolean;
    /**
     * The cases to be evaluated and displayed based on the `when` property
     */
    children: ReactNode;
}
/**
 * The properties for the `Switch` component.
 */
interface ISwitchProps {
    /**
     * The content displayed when no active case is found
     */
    fallback?: ReactNode;
    /**
     * The cases to be evaluated and displayed based on the `when` property
     */
    children: ReactNode[];
}
/**
 * The `Switch` component allows displaying only one active case from a set of cases.
 */
interface ISwitchComponent extends React.FC<ISwitchProps> {
    /**
     * The `Case` component for defining individual cases within the `Switch`.
     *
     * When `when` is `true`, it renders the `children` prop.
     *
     * @example
     * ```tsx
     * <Switch.Case when={condition}>
     *   <Content />
     * </Switch.Case>
     * ```
     *
     * @param when - Determines whether to show or hide the content.
     * @param children - The content to be displayed when `when` is `true`.
     * @returns The rendered content based on the `when` prop.
     */
    Case: typeof Case;
}
/**
 * The properties for the `ScrollTo` component.
 */
interface IScrollToProps {
    /**
     * The title of the ScrollTo button.
     */
    title?: React.ReactNode;
    /**
     * The direction to scroll. Can be one of: "up", "down", "left", or "right".
     */
    to?: "up" | "down" | "left" | "right";
    /**
     * The scroll width. Can be "max" or a specific number.
     */
    scrollWidth?: "max" | number;
    /**
     * The callback function to be called when the button is clicked.
     */
    onClick?: () => void;
    /**
     * The CSS class name for the ScrollTo button.
     */
    className?: string;
    /**
     * Specifies whether the ScrollTo button is clickable. Defaults to true.
     */
    isClickable?: boolean;
    /**
     * The scrolling behavior. Can be "smooth" or "auto". Defaults to "smooth".
     */
    behavior?: "smooth" | "auto";
    /**
     * The style prop for the ScrollTo Button
     */
    style?: CSSProperties;
}

/**
 * A component that conditionally renders content based on the Switch.Case `when` prop.
 *
 * When `when` is `true`, it renders the matching `Switch.Case` component.
 * When no matching `Switch.Case` is found and a `fallback` prop is provided, it renders the `fallback` prop.
 *
 * @example
 * ```tsx
 * <Switch fallback={<LoadingSpinner />}>
 *   <Switch.Case when={false}>Test</Switch.Case>
 *   <Switch.Case when={false}>Test2</Switch.Case>
 *   <Switch.Case when={true}>Test3</Switch.Case>
 *   <Switch.Case when={false}>Test4</Switch.Case>
 * </Switch>
 * ```
 *
 * @param fallback - The content to be displayed when `when` is `false`.
 * @param children - The children must be Switch.Case component.
 * @returns The rendered content based on the Switch.Case `when` prop.
 */
declare const Switch: ISwitchComponent;

/**
 * A component that iterates over an array of items and renders content for each item.
 *
 * When `items` is empty or not provided, it renders the `fallback` prop.
 * Otherwise, it maps over the `items` array, calling the `children` function for each item,
 * passing the item itself and its index as arguments.
 *
 * @example
 * ```tsx
 * <For items={users} fallback={<div>No users found.</div>}>
 *   {(user, index) => (
 *     <div key={index}>{user.name}</div>
 *   )}
 * </For>
 * ```
 *
 * @param items - An array of items to iterate over.
 * @param fallback - The content to be displayed when `items` is empty or not provided.
 * @param children - A function that receives each item and its index, and returns the content to be rendered for that item.
 * @returns The rendered content based on the `items` prop.
 */
declare const For: <T>({ items, fallback, children }: IForProps<T>) => React$1.JSX.Element;

/**
 * A component that conditionally renders content based on the `when` prop.
 *
 * When `when` is `true`, it renders the `children` prop.
 * When `when` is `false` and a `fallback` prop is provided, it renders the `fallback` prop.
 *
 * @example
 * ```tsx
 * <Show when={isLoading} fallback={<LoadingSpinner />}>
 *   <Content />
 * </Show>
 * ```
 *
 * @param when - Determines whether to show or hide the content.
 * @param fallback - The content to be displayed when `when` is `false`.
 * @param children - The content to be displayed when `when` is `true`.
 * @returns The rendered content based on the `when` prop.
 */
declare const Show: ({ when, fallback, children }: IShowProps) => React$1.JSX.Element | null;

/**
 * A button component that scrolls the window to a specific direction or position.
 *
 * When clicked, it triggers a scroll action using the specified scroll options.
 *
 * @param title - The title of the ScrollTo button. The title can be a string or a JSX.Element
 * @param to - The direction to scroll. Can be one of: "up", "down", "left", or "right". Defaults to "up".
 * @param scrollWidth - The scroll width. Can be "max" or a specific number. Defaults to "max".
 * @param onClick - The callback function to be called when the button is clicked.
 * @param className - The CSS class name for the ScrollTo button.
 * @param isClickable - Specifies whether the ScrollTo button is clickable. Defaults to true.
 * @param behavior - The scrolling behavior. Can be "smooth" or "auto". Defaults to "smooth".
 * @param style - The style prop for the ScrollTo Button.
 *
 * @example
 * ```tsx
 * <ScrollTo
 *   title="Scroll to Top"
 *   to="up"
 *   scrollWidth={200}
 *   onClick={handleClick}
 *   className="scroll-button"
 *   isClickable={true}
 *   behavior="smooth"
 *   style={style}
 * />
 * ```
 */
declare const ScrollTo: ({ title, to, scrollWidth, onClick, className, isClickable, behavior, style, }: IScrollToProps) => React$1.JSX.Element;

export { Case, For, ScrollTo, Show, Switch };