@progress/kendo-react-scrollview/index.d.mts

React ScrollView (React Carousel) displays images or content in a horizontally scrollable collection. KendoReact ScrollView package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as React_2 from 'react';

/**
 * Represents the [KendoReact ScrollView component]({% slug overview_scrollview %}).
 *
 * @example
 * ```jsx
 * const App = () => {
 *   const items: any[] = [
 *     { position: 1, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image1.jpg' },
 *     { position: 2, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image2.jpg' },
 *     { position: 3, url: 'https://demos.telerik.com/kendo-ui/content/web/scrollview/image3.jpg' }
 *   ];
 *   return (
 *     <ScrollView style={{width: 512, height: 384}}>
 *       {items.map((item, index) => {
 *         return (
 *           <div className="image-with-text" key={index}>
 *             <p>Showing image {item.position} of {items.length}.</p>
 *             <img
 *               src={item.url}
 *               alt={'Photo'}
 *               style={{width: 512, height: 384}}
 *               draggable={false}
 *             />
 *           </div>
 *         );
 *       })}
 *     </ScrollView>
 *   );
 * };
 * ReactDOM.render(<App />, document.querySelector('my-app'));
 * ```
 */
export declare const ScrollView: React_2.ForwardRefExoticComponent<ScrollViewProps & React_2.RefAttributes<ScrollViewHandle | null>>;

/**
 * The ScrollView ref.
 */
export declare interface ScrollViewHandle {
    /**
     * The ScrollView element.
     */
    element: HTMLDivElement | null;
    /**
     * Focus the ScrollView.
     */
    focus: () => void;
}

/**
 * Represents the props of the [KendoReact ScrollView component]({% slug overview_scrollview %}).
 */
export declare interface ScrollViewProps {
    /**
     * Represents the current active view ([see example]({% slug activeview_scrollview %})).
     * Defaults to `1`.
     *
     * @example
     * ```jsx
     * <ScrollView activeView={2} />
     * ```
     */
    activeView?: number;
    /**
     * Enables or disables the built-in navigation arrows ([see example]({% slug arrows_scrollview %})).
     * Defaults to `true`.
     *
     * @example
     * ```jsx
     * <ScrollView arrows={false} />
     * ```
     */
    arrows?: boolean;
    /**
     * Allows the ScrollView to switch the next page automatically after a short delay ([see example]({% slug automatic_scrolling_scrollview %})).
     * Defaults to `true`.
     *
     * @example
     * ```jsx
     * <ScrollView automaticViewChange={false} />
     * ```
     */
    automaticViewChange?: boolean;
    /**
     * Defines the automatic page change delay in milliseconds ([see example]({% slug automatic_scrolling_scrollview %})).
     * Defaults to `5000`.
     *
     * @example
     * ```jsx
     * <ScrollView automaticViewChangeInterval={3000} />
     * ```
     */
    automaticViewChangeInterval?: number;
    /**
     * Sets the ScrollView children elements.
     *
     * @example
     * ```jsx
     * <ScrollView>
     *   <div>Page 1</div>
     *   <div>Page 2</div>
     * </ScrollView>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Specifies a list of CSS classes that will be added to the ScrollView.
     *
     * @example
     * ```jsx
     * <ScrollView className="custom-scrollview" />
     * ```
     */
    className?: string;
    /**
     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
     *
     * @example
     * ```jsx
     * <ScrollView dir="rtl" />
     * ```
     */
    dir?: string;
    /**
     * Toggles the endless scrolling mode in which the data items are endlessly looped
     * ([see example]({% slug endlessscrolling_scrollview %})). Defaults to `false`.
     *
     * @example
     * ```jsx
     * <ScrollView endless={true} />
     * ```
     */
    endless?: boolean;
    /**
     * Toggles the built-in pager ([see example]({% slug paging_scrollview %})). Defaults to `true`.
     *
     * @example
     * ```jsx
     * <ScrollView pageable={false} />
     * ```
     */
    pageable?: boolean;
    /**
     * Sets the pager overlay ([see example]({% slug paging_scrollview %})).
     *
     * The possible values are:
     * * `none`(Default) &mdash; No overlay is set.
     * * `dark` &mdash; Dark overlay is set.
     * * `light` &mdash; Light overlay is set.
     *
     * @example
     * ```jsx
     * <ScrollView pagerOverlay="dark" />
     * ```
     */
    pagerOverlay?: 'dark' | 'light' | 'none';
    /**
     * Sets additional CSS styles to the ScrollView.
     *
     * @example
     * ```jsx
     * <ScrollView style={{ width: '100%' }} />
     * ```
     */
    style?: React.CSSProperties;
}

export { }