@ahmed-osama-salem/swiper-react-component NPM

Swiper-react-component

NPM version NPM license

Swiper React Component Elevate Your Slider Game with Seamless Reusability and Optimal Performance!. just install and start your Slider Game ,its swiper but smarter ✨

✨ Demo

Swiper-React-Component is a resuable and smarter component based on swiper library and based on cloning elements with different shapes this component always focused on handling external data with swiper slides that can easily handled by a developer and when working with team you just need one component to handle your needs static data , api , styles, etc without creating many different components and too much imports in your project that make it too hard to read and fix , so now don't be sad this component is your ideal soluation with your slider game .

Getting started

Install swiper-react-component using npm.

# NPM
npm i @ahmed-osama-salem/swiper-react-component

# YARN
yarn add @ahmed-osama-salem/swiper-react-component

Example

See the docs, tutorials and examples on the Github:

You can find swiper-react-component examples here.

Styles

you need to import a global styles in the root of your app , no need to import it every time use swiper component ,this avaliable from v 1.2.8 to latest and this fix styles when pre-render your page.

import '@ahmed-osama-salem/swiper-react-component/dist/style.css';

for example in next app router in layout.tsx

import './globals.css';
import { Nunito } from 'next/font/google';

import '@ahmed-osama-salem/swiper-react-component/dist/style.css'; // HERE

const nunito = Nunito({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body className={nunito.className}>{children}</body>
    </html>
  );
}

🚀 Usage

your first swiper component

import { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';

interface ShapeOneProps {
  item?: { id: number };
}

// THIS IS YOUR SWIPERSLIDE COMPONENT THAT AUTOMATICALLY READ EVERY OBJECT OF YOUR DATA AS item prop
// YOU CAN CUSTOMIZE YOUR OWN

const ShapeOne = (props: ShapeOneProps) => {
  return (
    <div className="flex h-[250px] w-[100%] items-center justify-center bg-stone-300 rounded-lg ">
      {props.item?.id}
    </div>
  );
};

const SwiperPagination = () => {
  // Your custom data you can add any data like you want , but must have an id key
  const data = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
  ];

  return (
    <div className="w-full">
      <SwiperCarousel
        item={data}
        slidesPerView={1}
        pagination
        navigation
        spaceBetween={2}
        direction="horizontal"
        swiperContainerClass="w-[80%]"
      >
        <ShapeOne />
      </SwiperCarousel>
    </div>
  );
};

export default SwiperPagination;

swiper component can easy handle api data by passing your api data state

import { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';
import axios from 'axios';
import { useEffect, useState } from 'react';

const ShapeOne = ({
  item,
}: {
  item?: { id: number, urls: { raw: string } },
}) => {
  return (
    <div className="flex h-[250px] w-[250px] items-center justify-center bg-stone-300 rounded-full">
      <img
        alt="image"
        src={item?.urls.raw}
        className=" rounded-full object-cover w-full h-full"
      />
    </div>
  );
};

const SwiperWithApi = () => {
  const [data, setData] = useState([]);

  const getRandomData = async () => {
    const res = await axios
      .get(
        'https://api.unsplash.com/photos/?client_id=9dfwtUcXdaD9C3I6HXgAq-3R4Ceyry8mv9ryFvd54dA'
      )
      .then(data => {
        setData(data.data);
      })
      .catch(err => {
        return err;
      });

    return res;
  };

  useEffect(() => {
    getRandomData();
  }, []);

  return (
    <SwiperCarousel
      item={data}
      navigation
      slidesPerView={5}
      spaceBetween={2}
      direction="horizontal"
    >
      <ShapeOne />
    </SwiperCarousel>
  );
};

export default SwiperWithApi;

swiperProps can provide any props from swiper lib from one prop

<SwiperCarousel
  item={data}
  slidesPerView={1}
  pagination
  spaceBetween={2}
  direction="horizontal"
  swiperContainerClass="w-[80%]"
  swiperProps={{ pagination: { type: 'progressbar' } }} // HERE
>
  <ShapeOne />
</SwiperCarousel>

Props

Prop	Type	Description
item(required)	object[]	slides data with the following keys: `id` is the primary Example: `[{id: 1, anything: 'sub'}, { id: 2, anything: "sub 2"}]`
children(required)	ReactElement<{ item: T }>	your component that will render every object in your data in a single slide of swiper that accept any shape of data.
direction(recommended)	string	by default is horizontal `"horizontal" or "vertical"`
slidesPerView	number	number of how may slide show per view of swiper by default is `4`
spaceBetween	number	number of gaps between slides by default is `30`
pagination	boolean	`true` if you want to add pagination
navigation	boolean	`true` if you want to add navigation
swiperContainerClass	string	class of main swiper container accept any css class ,tailwind or bootstrap classes
swiperSlideClass	string	class of swiper slides accept any css class ,tailwind or bootstrap classes.
swiperProps	SwiperOptions	this prop catches any option or props in swiper lib and give you many option to handle your swiper .