Render JSX for custom pagination?

[AlixAkhribi]

Hello, I'm trying to render some JSX as custom pagination bullets, but it doesn't work.

Here's my code:

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// import Swiper core and required modules
import SwiperCore, { Pagination } from "swiper";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

// install Swiper modules
SwiperCore.use([Pagination]);

export default function App() {
  const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return <div> Hello world </div>;
    },
  };

  return (
    <Swiper pagination={pagination} className="mySwiper">
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

I get an [Object, object] rendered for the pagination.

[lamhungypl]

take a look at pagiantion.d.ts: type?: 'bullets' | 'fraction' | 'progressbar' | 'custom';
What you need is renderCustom?: (swiper: Swiper, current: number, total: number) => void;

const pagination = {
        type: 'custom',
        renderCustom: (_, current, total) => {
          return return <div> Hello world </div>;
        },
}

[Yeasiin]

I know I am late. and maybe you already solved your problem. but I am putting my solution here so that in the future when someone faces the problem he/she gets the solution.

// This ReactDOMServer will help you to return jsx
import * as ReactDOMServer from "react-dom/server";

 const pagination = {
    clickable: true,
    renderBullet: function (index, className) {
      return ReactDOMServer.renderToStaticMarkup(<div>This renderToStaticMarkup will convert your JSX into html</div>);
    },
  };

[newadbie]

Works! Amazing

[Yazzss]

and what to do if I i need a dynamic style value, for example style={{width: ${dynamic value * 100}%}} ?

[leiniercy]

pagination={{
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
type: "custom",
renderCustom: function (swiper, current, total) {
const getPageNumbers = () => {
if (total <= 5) {
return Array.from({ length: total }, (_, index) => index + 1);
} else if (current <= 3) {
return [1, 2, 3, 4, 5];
} else if (current >= total - 2) {
return [total - 4, total - 3, total - 2, total - 1, total];
} else {
return [
current - 2,
current - 1,
current,
current + 1,
current + 2,
];
}
};
var text = "

";
getPageNumbers().forEach((number) => {
if (current === number) {
text += <li class="swiper-pagination-bullet ${styles.active}">${number}</li>;
} else {
text += <li class="swiper-pagination-bullet">${number}</li>;
}
});
text += "

";
return text;
},
}}