Swiper-react-component
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 .
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-componentExample
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.8to 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;
swiperPropscan 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
- Linkedin: @AhmedOsama
- Github: Ahmed Osama
Show your support
Please ⭐️ this repository if this package helped you!
📝 License
Copyright © 2023 Ahmed Osama.
This project is MIT licensed.