@nfq/react-grid/types/grid/ScreenBadge.d.ts

An fork of react-awesome-styled-grid with more screen classes and some features.

import React from 'react';
/**
 * Props for the `<ScreenBadge />` component.
 * This interface defines optional configuration for testing purposes. It allows injecting
 * a `data-cy` attribute using a `testId`, commonly used in end-to-end testing with Cypress.
 */
interface ComponentProps {
    /**
     * A test identifier for use with Cypress or other test frameworks.
     * This will be applied as a `data-cy` attribute on the rendered element.
     *
     * @default 'ScreenBadge'
     */
    testId?: string;
}
/**
 * Displays the current active screen size as a badge element for debugging or testing purposes.
 * The `ScreenBadge` component consumes the current breakpoint from `useScreenSize()` and renders it
 * as text inside a styled badge element. It can be customized with a `testId` for Cypress or other
 * test automation tools via the `data-cy` attribute.
 * This is particularly useful during development for visually identifying which breakpoint is active.
 *
 * @param props        The component props.
 * @param props.testId The test identifier applied as `data-cy`. Defaults to `'ScreenBadge'`.
 * @returns A styled badge element displaying the current breakpoint name.
 *
 * @example
 * ```tsx
 * <ScreenBadge />
 * // Renders something like: <span data-cy="ScreenBadge">md</span>
 *
 * <ScreenBadge testId="current-breakpoint" />
 * // Renders: <span data-cy="current-breakpoint">md</span>
 * ```
 */
declare const ScreenBadge: {
    ({ testId }: ComponentProps): React.JSX.Element;
    displayName: string;
};
export { ScreenBadge };