@ahmed-osama-salem/swiper-react-component
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

Swiper-react-component

NPM version NPM license NPM total downloads NPM monthly downloads PRs Welcome Github

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 .

demo

Table of Contents

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 .

Browser Compatibility

Browser Works?
Chrome Yes
Firefox Yes
Safari Yes
IE 11 Yes

🤝 Contributing

Contributions, issues and feature requests are welcome.
Feel free to check issues page if you want to contribute.
Check the contributing guide.

Author

👤 Ahmed Osama

Show your support

Please ⭐️ this repository if this package helped you!

📝 License

Copyright © 2023 Ahmed Osama.
This project is MIT licensed.

Readme

Keywords

none

Package Sidebar

Install

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

Weekly Downloads

1

Version

1.3.0

License

MIT

Unpacked Size

49.8 kB

Total Files

16

Last publish

Collaborators

  • ahmed-osama-salem