npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v1.3.0

Published

![NPM version](https://img.shields.io/npm/v/@ahmed-osama-salem/swiper-react-component?style=flat) ![NPM license](https://img.shields.io/npm/l/@ahmed-osama-salem/swiper-react-component?style=flat) [![NPM total downloads](https://img.shields.io/npm/dt/@ahme

Downloads

22

Readme

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 .

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.