TIL cara mengintegrasikan Swiper Web Component dengan React + TypeScript.

Di salah satu proyek, saya perlu membuat carousel — sesuatu yang simpel, rapi, dan fleksibel. Saya sudah pernah pakai Swiper sebelumnya, jadi otomatis saya pilih itu lagi. Tapi kali ini saya menemukan hal baru:

The React version might be deprecated in the future.

Karena penasaran, saya coba pakai versi Web Component yang sekarang direkomendasikan Swiper.

Ternyata cara pakainya di React cukup mudah — tinggal definisikan custom element-nya, tambahkan typing di TypeScript, lalu pakai seperti tag JSX biasa. Performanya tetap bagus, dan saya justru suka karena terasa lebih “dekat” dengan platform web aslinya.

Penemuan kecil, tapi menarik buat saya — melihat bagaimana banyak library modern mulai beralih ke web component yang framework-agnostic, dan bagaimana React tetap bisa bekerja mulus dengan pendekatan itu.

// Swiper.tsx
import * as React from 'react';
import {register} from 'swiper/element/bundle';
import {SwiperOptions, Swiper as SwiperClass} from 'swiper/types';

export type {SwiperClass};

// Typings for the web component
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'swiper-container': SwiperContainerProps;
      'swiper-slide': SwiperSlideProps;
    }
  }

  interface SwiperContainerElement extends HTMLElement {
    initialize: () => void;
  }
}

// Define the specific props for swiper-container
interface SwiperContainerProps
  extends React.HTMLAttributes<SwiperContainerElement> {
  init?: string;
  ref?: React.MutableRefObject<SwiperContainerElement | null>;
}

// Define the specific props for swiper-slide
interface SwiperSlideProps extends React.HTMLAttributes<HTMLElement> {}

export type SwiperProps = React.PropsWithChildren<
  {
    ref?: React.MutableRefObject<SwiperContainerElement | null>;
  } & SwiperOptions
>;

export const Swiper = React.memo((props: SwiperProps) => {
  const fallbackSliderRef = React.useRef<SwiperContainerElement | null>(null);
  const swiperRef = props.ref || fallbackSliderRef;

  const {children, ...rest} = props;

  React.useEffect(() => {
    // Register Swiper web component
    register();

    // pass component props to parameters
    const params = {
      ...rest,
    };

    if (swiperRef.current) {
      // Assign it to swiper element
      Object.assign(swiperRef.current, params);

      // initialize swiper
      swiperRef.current.initialize();
    }
  }, [rest, swiperRef]);

  return (
    <swiper-container init="false" ref={swiperRef}>
      {children}
    </swiper-container>
  );
});

export const SwiperSlide = React.memo(
  (props: React.HTMLAttributes<HTMLElement>) => {
    const {children, ...rest} = props;

    return <swiper-slide {...rest}>{children}</swiper-slide>;
  }
);

React Swiper Component

import { Swiper, SwiperSlide } from 'path/to/Swiper.tsx';

export default function App() {
  return (
    <Swiper
      slidesPerView={3}
      breakpoints={{ 768: { slidesPerView: 4 } }}
      on={{
        slideChange: () => console.log('slide changed'),
        progress: (s, progress) => console.log(`progress is ${progress}`),
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

#TIL - Menggunakan `Swiper` Web Component di `React` (Versi `TypeScript`)

Refleksi singkat tentang cara menggunakan Swiper Web Component di React + TypeScript — langkah kecil meninggalkan React wrapper, dan melihat arah masa depan web component yang lebih universal.