【JavaScript】【Swiper】Swiper Web Component (with TypeScript, React)

重點

• 官方文件提到，會推薦用 Web component 的形式來使用 Swiper，可能是開發者覺得維護各種框架的 Library 太累了，所以「回歸初衷」，推廣原生 Web component 開發的 Swiper 吧。

• 直接用是沒什麼問題，但若使用在 React 中，組件那邊的型別會報錯，所以得自己「宣告」型別。像是以下這樣

  declare module "react/jsx-runtime" {
    namespace JSX {
      interface IntrinsicElements {
        "swiper-container": React.HTMLAttributes<HTMLDivElement> & {
          "slides-per-view": string;
          //...
        };
        "swiper-slide": React.HTMLAttributes<HTMLDivElement>;
      }
    }
  }
  
  //...

• 另外，若在現階段型別的解決方案，想要有組件的 props「提示」，可能得自己手動宣告。如上面程式碼的這一段

  "slides-per-view": string;

• 可能這得等之後官方釋出更新，才會把型別問題徹底解決。

實作

import "./styles.css";
import { register } from "swiper/element/bundle";

register();

declare module "react/jsx-runtime" {
  namespace JSX {
    interface IntrinsicElements {
      "swiper-container": React.HTMLAttributes<HTMLDivElement> & {
        "slides-per-view": string;
        //...
      };
      "swiper-slide": React.HTMLAttributes<HTMLDivElement>;
    }
  }
}

const SWIPER_LIST_DATA = Array(6).fill(0);

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <swiper-container slides-per-view="3" centered-slides={true} loop={true}>
        {SWIPER_LIST_DATA.map((_, i) => (
          <swiper-slide key={i}>Slide {i + 1}</swiper-slide>
        ))}
      </swiper-container>
    </div>
  );
}

---

REF

• https://swiperjs.com/element
• https://swiperjs.com/swiper-api#typescript-definitions
• CodeSandBox範例： https://www.keybr.com/