react-spring-carousel 2.0.19 → 3.0.0-beta-1.0.1

package/README.md

@@ -1,54 +1,50 @@
-# react-spring-carousel
+# React + TypeScript + Vite
 
-> A performant React carousel component powered by `react-spring` and `@use-gesture`.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-[![NPM](https://img.shields.io/npm/v/react-spring-carousel.svg)](https://www.npmjs.com/package/react-spring-carousel) [![NPM](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)](https://img.shields.io/bundlephobia/minzip/react-spring-carousel)
+Currently, two official plugins are available:
 
-## Install
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-```bash
-// npm v7.x
-npm install --save react-spring-carousel
-```
-
-```bash
-// npm v6.x or less
-npm install --save react-spring react-spring-carousel
-```
+## Expanding the ESLint configuration
 
-```bash
-yarn add react-spring react-spring-carousel
-```
-
-## Usage
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
 
-```tsx
-import { useSpringCarousel } from 'react-spring-carousel'
+- Configure the top-level `parserOptions` property like this:
 
-const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({
-  items: [
-    {
-      id: 'item-1',
-      renderItem: <div>Item 1</div>,
-    },
-    {
-      id: 'item-2',
-      renderItem: <div>Item 2</div>,
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
     },
-  ],
+  },
 })
-
-return (
-  <div>
-    <button onClick={slideToPrevItem}>Prev item</button>
-    <div>{carouselFragment}</div>
-    <button onClick={slideToNextItem}>Next item</button>
-  </div>
-)
 ```
 
-## Official documentation
-
-For a complete overview of the library, please visit the official documentation.
-
-[Visit here](https://react-spring-carousel.emilianobucci.com)
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import { FullGestureState } from '@use-gesture/react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare type FixedSlideTypeProps = {
+    slideType?: "fixed";
+    scrollAmount?: never;
+    itemsPerSlide?: number;
+    scrollAmountType?: "group" | "slide";
+};
+
+declare type FluidSlideTypeProps = {
+    slideType?: "fluid";
+    scrollAmount?: number;
+    itemsPerSlide?: never;
+    scrollAmountType?: never;
+};
+
+declare type FreeScrollSlideTypeProps = {
+    slideType?: "freeScroll";
+    scrollAmount?: number;
+    itemsPerSlide?: never;
+    scrollAmountType?: never;
+    withLoop?: never;
+};
+
+declare type Item = {
+    id: string;
+    renderItem: ReactNode;
+    renderThumb?: ReactNode;
+};
+
+declare type OnDrag = Omit<FullGestureState<"drag">, "event"> & {
+    eventName: "onDrag";
+    slideActionType: SlideActionType;
+};
+
+declare type OnSlideChangeComplete = {
+    eventName: "onSlideChangeComplete";
+    slideDirection: SlideDirection;
+    sliceActionType: SlideActionType;
+    currentItem: {
+        index: number;
+        id: string;
+        startReached: boolean | undefined;
+        endReached: boolean | undefined;
+    };
+};
+
+declare type OnSlideStartChange = {
+    eventName: "onSlideStartChange";
+    slideDirection: SlideDirection;
+    sliceActionType: SlideActionType;
+    nextItem: {
+        index: number;
+        id: string;
+        startReached: boolean | undefined;
+        endReached: boolean | undefined;
+    };
+};
+
+declare type Props = {
+    init?: boolean;
+    slideType?: SlideType;
+    items: Item[];
+    withLoop?: boolean;
+    enableGestures?: boolean;
+    carouselAxis?: "x" | "y";
+    slideWhenDragThresholdIsReached?: boolean;
+    gutter?: number;
+    startEndGutter?: number;
+    fadeIn?: boolean;
+} & (FixedSlideTypeProps | FluidSlideTypeProps | FreeScrollSlideTypeProps);
+
+declare type SlideActionType = "drag" | "click";
+
+declare type SlideDirection = "prev" | "next";
+
+declare type SlideType = "fixed" | "fluid" | "freeScroll";
+
+declare type SpringCarouselEvents = OnSlideStartChange | OnSlideChangeComplete | OnDrag;
+
+declare type SpringCarouselEventsEventHandler = (props: SpringCarouselEvents) => void;
+
+export declare function useSpringCarousel({ init, items: _items, slideType, scrollAmount: _scrollAmount, withLoop, enableGestures, carouselAxis, slideWhenDragThresholdIsReached, itemsPerSlide: _itemsPerSlide, scrollAmountType: _scrollAmountType, gutter, startEndGutter, fadeIn, }: Props): {
+    carouselFragment: JSX_2.Element;
+    useListenToCustomEvent: (eventHandler: SpringCarouselEventsEventHandler) => void;
+    slideToNextItem: () => void;
+    slideToPrevItem: () => void;
+    slideToIem: (id: string | number) => void;
+    handleThumbsContainerScroll: ({ getContainer, activeItem, updateTotalValue, }: {
+        activeItem: number;
+        getContainer(): HTMLElement | null;
+        updateTotalValue?(props: {
+            from: number;
+            to: number;
+            itemOutOfViewport: {
+                isOut: boolean;
+                direction: "start" | "end" | null;
+            };
+        }): number;
+    }) => void;
+    carouselId: string;
+};
+
+export { }