@nicecaroujs/react/dist/index.d.ts

A simple and customizable carousel library for React. This component allows you to display items dynamically with flexible configuration options.

import React, { ReactNode, HTMLAttributes } from 'react';

type initArgsType = {
    options: defaultOptionsType | undefined;
    selector: string | undefined;
};
type positionType = "center" | "inside" | "outside";
type themeColorsTypes = {
    primary: string | null;
    secondary: string | null;
    third: string | null;
};
type justifyContentType = "center" | "space-between" | "flex-start" | "flex-end" | "space-around" | "space-evenly" | undefined;
type alignItemsType = "flex-start" | "flex-end" | "center" | "baseline" | "stretch" | undefined;
type orientationType = "vertical" | "horizontal" | undefined;
type autoplayOptionsType = {
    delay: number | undefined;
    enabled: boolean | undefined;
    type: string | undefined;
    isPlaying: boolean | undefined;
    fillProgressbar?: boolean | undefined;
    pauseOnHover?: boolean | undefined;
};
type paginationPosition = Omit<positionType, "center">;
type paginationOptionsType = {
    enabled: boolean | undefined;
    type?: string | undefined;
    position?: paginationPosition | undefined;
    defaultDotsStyle?: boolean | undefined;
    currentIndex?: number | undefined;
    numberDots?: number | undefined;
    wrap?: boolean | undefined;
    specialWrap?: {
        enabled?: boolean | undefined;
        left?: string | undefined;
        top?: string | undefined;
        justifyContent?: justifyContentType | undefined;
        alignItems?: alignItemsType | undefined;
        orientation?: orientationType | undefined;
    } | undefined;
    gap?: string | undefined;
    sizeButton?: string | undefined;
};
type arrowsOptionsType = {
    specialDisplay?: {
        enabled?: boolean | undefined;
        justifyContent?: justifyContentType | undefined;
        alignItems?: alignItemsType | undefined;
        gap?: string | undefined;
        prevButton?: {
            left?: string | undefined;
            top?: string;
        } | undefined;
        nextButton?: {
            left?: string | undefined;
            top?: string;
        } | undefined;
    } | undefined;
    enabled?: boolean | undefined;
    position?: string | undefined;
    shake?: boolean | undefined;
    type?: string | undefined;
    sizeButton?: string | undefined;
    arrowRadius?: string | undefined;
    hideArrowIsInactive?: boolean | undefined;
};
type paginationOptionsTypeBreakpoints = {
    enabled: boolean | undefined;
};
type arrowsOptionsTypeBreakpoints = {
    enabled: boolean | undefined;
};
type breakpointOptionsTypeBreakpoints = {
    itemsPerPage?: number | undefined;
    itemsPerSlide?: number | undefined;
    pagination?: paginationOptionsTypeBreakpoints | undefined;
    arrows?: arrowsOptionsTypeBreakpoints | undefined;
};
type breakpointsOptionsType = {
    phone?: breakpointOptionsTypeBreakpoints | undefined;
    tablet?: breakpointOptionsTypeBreakpoints | undefined;
    laptop?: breakpointOptionsTypeBreakpoints | undefined;
    desktop?: breakpointOptionsTypeBreakpoints | undefined;
};
type themeType = "light" | "dark" | "lightAppl";
type defaultOptionsType = {
    enabledLoader?: boolean | undefined;
    applytransparentMaskOnBorder?: boolean | undefined;
    ease?: string | undefined;
    drag?: boolean | undefined;
    bgGradientAnimated?: boolean | undefined;
    width?: string | undefined;
    autoplay?: autoplayOptionsType | undefined;
    pagination?: paginationOptionsType | undefined;
    arrows?: arrowsOptionsType | undefined;
    customTheme?: themeColorsTypes | undefined;
    defaultDotsStyle?: boolean | undefined;
    theme?: themeType;
    slideRadius?: string | undefined;
    paddingY?: string | undefined;
    containerRadius?: string | undefined;
    itemsPerPage?: number | undefined;
    itemsPerSlide?: number | undefined;
    height?: string | undefined;
    hideArrowIsInactive?: boolean | undefined;
    breakpoints?: breakpointsOptionsType | undefined;
    gap?: string | undefined;
};

declare const NcContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
    children: ReactNode;
    className?: string;
    options?: defaultOptionsType;
} & React.RefAttributes<HTMLDivElement>>;

type NcSlideProps = HTMLAttributes<HTMLDivElement> & {
    children: ReactNode;
};
declare const NcSlide: ({ children, ...props }: NcSlideProps) => React.JSX.Element;

type NcWrapper = HTMLAttributes<HTMLDivElement> & {
    children: ReactNode;
};
declare const NcWrapper: ({ children, ...props }: NcWrapper) => React.JSX.Element;

declare const init: ({ options, selector }: initArgsType) => void;

export { NcContainer, NcSlide, NcWrapper, init };