","bugs":{"url":"https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues"},"homepage":"https://github.com/Ahmed-Osama-Salem/swiper-react-component#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-Jxb84kR6r8Jew15YZfIjFeGkaTL9U0DwiY0lDXWFItKLGALo+mqclYMm8jFsEk1a0OCbWd/3EXbnIS26xfJ3MQ==","shasum":"c37e4f3f0af279f52794e0f5e84ce6aa1a0b98b0","tarball":"https://registry.npmjs.org/@ahmed-osama-salem/swiper-react-component/-/swiper-react-component-1.2.7.tgz","fileCount":16,"unpackedSize":35219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICOFUDdABn4XjBEt3X0W7kr5qgTaQ/qvKejkmBxWlBnkAiEAvpINnOZEwEKDl3a41EIYsYDUEcYsMpZ1msXSbpj0LOk="}]},"_npmUser":{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/swiper-react-component_1.2.7_1698432756723_0.07116427559894656"},"_hasShrinkwrap":false},"1.2.8":{"version":"1.2.8","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"NODE_ENV=production tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@ahmed-osama-salem/swiper-react-component","author":{"name":"Ahmed-Osama-Salem"},"module":"dist/swiper-react-component.esm.js","size-limit":[{"path":"dist/swiper-react-component.cjs.production.min.js","limit":"10 KB"},{"path":"dist/swiper-react-component.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.23.2","@size-limit/preset-small-lib":"^9.0.0","@storybook/addon-essentials":"^7.5.0","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^7.5.0","@storybook/addons":"^7.5.0","@storybook/react":"^7.5.0","@types/react":"^18.2.29","@types/react-dom":"^18.2.14","autoprefixer":"^10.4.16","babel-loader":"^9.1.3","css-loader":"^6.8.1","cssnano":"^6.0.1","husky":"^8.0.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.31","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-copy-assets":"^2.0.3","rollup-plugin-postcss":"^4.0.2","size-limit":"^9.0.0","style-loader":"^3.3.3","tsdx":"^0.14.1","tslib":"^2.6.2","typescript":"^5.2.2","semantic-release":"^22.0.5"},"dependencies":{"swiper":"^10.3.1"},"repository":{"type":"git","url":"git+https://github.com/Ahmed-Osama-Salem/swiper-react-component.git"},"_id":"@ahmed-osama-salem/swiper-react-component@1.2.8","gitHead":"dc5b00ac76fc322905c8c252d20f944ba926acd3","description":"
","bugs":{"url":"https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues"},"homepage":"https://github.com/Ahmed-Osama-Salem/swiper-react-component#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-897BB1nBVBDLlUshrBBQStwJB89FHK3DV+gODffSVR3TBBvQheev/aLS9tdOY84nzTmKgTTys9Dx6KejwWfddQ==","shasum":"61fcc579d60f21f98dd40f4113b8b2f6b69f34a8","tarball":"https://registry.npmjs.org/@ahmed-osama-salem/swiper-react-component/-/swiper-react-component-1.2.8.tgz","fileCount":16,"unpackedSize":50767,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICX48F1I6t9pCwqSyscpZMdSECvn9k31MVt5h4HH8Xw4AiEAss1f+6TOo1q1LsTAzqC7Fm81rMomKo880xwHjwuzRPU="}]},"_npmUser":{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/swiper-react-component_1.2.8_1698777098198_0.35738901536033807"},"_hasShrinkwrap":false},"1.2.9":{"version":"1.2.9","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":">=10"},"scripts":{"start":"tsdx watch","build":"NODE_ENV=production tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@ahmed-osama-salem/swiper-react-component","author":{"name":"Ahmed-Osama-Salem"},"module":"dist/swiper-react-component.esm.js","size-limit":[{"path":"dist/swiper-react-component.cjs.production.min.js","limit":"10 KB"},{"path":"dist/swiper-react-component.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.23.2","@size-limit/preset-small-lib":"^9.0.0","@storybook/addon-essentials":"^7.5.0","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^7.5.0","@storybook/addons":"^7.5.0","@storybook/react":"^7.5.0","@types/react":"^18.2.29","@types/react-dom":"^18.2.14","autoprefixer":"^10.4.16","babel-loader":"^9.1.3","css-loader":"^6.8.1","cssnano":"^6.0.1","husky":"^8.0.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.31","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-copy-assets":"^2.0.3","rollup-plugin-postcss":"^4.0.2","size-limit":"^9.0.0","style-loader":"^3.3.3","tsdx":"^0.14.1","tslib":"^2.6.2","typescript":"^5.2.2","semantic-release":"^22.0.5"},"dependencies":{"swiper":"^10.3.1"},"repository":{"type":"git","url":"git+https://github.com/Ahmed-Osama-Salem/swiper-react-component.git"},"_id":"@ahmed-osama-salem/swiper-react-component@1.2.9","gitHead":"8634079002d14294494e7ab1bef40cbe15c22ed2","description":"
![](\"https://img.shields.io/npm/v/readme-md-generator.svg?orange=blue\")
![\"downloads\"](\"https://img.shields.io/npm/dm/readme-md-","bugs":{"url":"https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues"},"homepage":"https://github.com/Ahmed-Osama-Salem/swiper-react-component#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-ziUm1Gb2c1B7dlZN1snrdnItNC5vXaoHoOeV7fX3egMSFlyfzZqD/QPCyitVOmztWXqsL7ItiupUnUbdp2iKhA==","shasum":"515b778ff45ae41bc6284afe2be5cded309aa1bf","tarball":"https://registry.npmjs.org/@ahmed-osama-salem/swiper-react-component/-/swiper-react-component-1.2.9.tgz","fileCount":16,"unpackedSize":50050,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCB78+r/31kLFCHLcpDOCsXVjq4uBiZheZwH7CIiqK5uAIgH1xpFd+JwQYWqCvAYV87NsJP1o+30so4SUq75NzCi3M="}]},"_npmUser":{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/swiper-react-component_1.2.9_1699023327450_0.5907225524062218"},"_hasShrinkwrap":false},"1.3.0":{"version":"1.3.0","license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","engines":{"node":")
=10"},"scripts":{"start":"tsdx watch","build":"NODE_ENV=production tsdx build","test":"tsdx test --passWithNoTests","lint":"tsdx lint","prepare":"tsdx build","size":"size-limit","analyze":"size-limit --why","storybook":"start-storybook -p 6006","build-storybook":"build-storybook","semantic-release":"semantic-release --branches main"},"peerDependencies":{"react":">=16"},"husky":{"hooks":{"pre-commit":"tsdx lint"}},"prettier":{"printWidth":80,"semi":true,"singleQuote":true,"trailingComma":"es5"},"name":"@ahmed-osama-salem/swiper-react-component","author":{"name":"Ahmed-Osama-Salem"},"module":"dist/swiper-react-component.esm.js","size-limit":[{"path":"dist/swiper-react-component.cjs.production.min.js","limit":"10 KB"},{"path":"dist/swiper-react-component.esm.js","limit":"10 KB"}],"devDependencies":{"@babel/core":"^7.23.2","@size-limit/preset-small-lib":"^9.0.0","@storybook/addon-essentials":"^7.5.0","@storybook/addon-info":"^5.3.21","@storybook/addon-links":"^7.5.0","@storybook/addons":"^7.5.0","@storybook/react":"^7.5.0","@types/react":"^18.2.29","@types/react-dom":"^18.2.14","autoprefixer":"^10.4.16","babel-loader":"^9.1.3","css-loader":"^6.8.1","cssnano":"^6.0.1","husky":"^8.0.3","mini-css-extract-plugin":"^2.7.6","postcss":"^8.4.31","react":"^18.2.0","react-dom":"^18.2.0","react-is":"^18.2.0","rollup-plugin-copy":"^3.5.0","rollup-plugin-copy-assets":"^2.0.3","rollup-plugin-postcss":"^4.0.2","size-limit":"^9.0.0","style-loader":"^3.3.3","tsdx":"^0.14.1","tslib":"^2.6.2","typescript":"^5.2.2","semantic-release":"^22.0.5"},"dependencies":{"swiper":"^10.3.1"},"repository":{"type":"git","url":"git+https://github.com/Ahmed-Osama-Salem/swiper-react-component.git"},"_id":"@ahmed-osama-salem/swiper-react-component@1.3.0","gitHead":"960fc3e0a0f12c1d48a96438d9bc8bd0efb898a5","description":"  [![NPM total downloads](https://img.shields.io/npm/dt/@ahme","bugs":{"url":"https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues"},"homepage":"https://github.com/Ahmed-Osama-Salem/swiper-react-component#readme","_nodeVersion":"18.18.2","_npmVersion":"9.8.1","dist":{"integrity":"sha512-SeVu939k0IhXMp2zo/NVYk+em4J9GAGmy/fRfllo23U0Ler6H9vOVduom1YIp2YRu6ywFCp+Ud98GO+myCYRzA==","shasum":"c4c1b315c24282e603d196ebb0fb7ea7eb5eb8ff","tarball":"https://registry.npmjs.org/@ahmed-osama-salem/swiper-react-component/-/swiper-react-component-1.3.0.tgz","fileCount":16,"unpackedSize":49778,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHTkMiBIA30Mhs81UhW5TxKYl8LEDpExDtpuyNJE9nLQIgL6HKJrE0qyzTNoNZ1G6wzM2Km/8oWZsu5Bo2MRx4RH0="}]},"_npmUser":{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"},"directories":{},"maintainers":[{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/swiper-react-component_1.3.0_1699024839269_0.20873803862500906"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-19T12:06:36.038Z","0.1.0":"2023-10-19T12:06:36.380Z","modified":"2023-11-03T15:20:39.735Z","1.0.0":"2023-10-19T12:41:03.803Z","1.1.0":"2023-10-19T13:33:10.213Z","1.2.0":"2023-10-19T13:50:22.124Z","1.2.1":"2023-10-21T20:37:27.027Z","1.2.2":"2023-10-22T17:29:15.107Z","1.2.3":"2023-10-22T19:53:47.445Z","1.2.4":"2023-10-23T18:39:11.409Z","1.2.5":"2023-10-25T19:16:47.101Z","1.2.6":"2023-10-27T15:47:09.586Z","1.2.7":"2023-10-27T18:52:36.950Z","1.2.8":"2023-10-31T18:31:38.415Z","1.2.9":"2023-11-03T14:55:27.699Z","1.3.0":"2023-11-03T15:20:39.590Z"},"maintainers":[{"name":"ahmed-osama-salem","email":"ahmedosamaweb@gmail.com"}],"description":"  [![NPM total downloads](https://img.shields.io/npm/dt/@ahme","author":{"name":"Ahmed-Osama-Salem"},"license":"MIT","readme":"# Swiper-react-component\n\n\n\n[](https://npmcharts.com/compare/react-sortable-tree?minimal=true)\n[](https://npmcharts.com/compare/react-sortable-tree?minimal=true)\n[](http://makeapullrequest.com)\n[](https://github.com/Ahmed-Osama-Salem)\n\n> Swiper React Component Elevate Your Slider Game with Seamless Reusability and Optimal Performance!.
just install and start your Slider Game ,its swiper but smarter ✨\n\n## ✨ Demo\n\n`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 .\n\n\n ![\"demo\"/](\"https://github.com/Ahmed-Osama-Salem/swiper-react-component-demo/blob/main/public/demo.gif\")
\n
\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [Example](#example)\n- [Styles](#styles)\n- [Usage](#usage)\n- [Props](#props)\n- [Browser Compatibility](#browser-compatibility)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n\n## Getting started\n\nInstall `swiper-react-component` using npm.\n\n```sh\n# NPM\nnpm i @ahmed-osama-salem/swiper-react-component\n\n# YARN\nyarn add @ahmed-osama-salem/swiper-react-component\n```\n\n## Example\n\nSee the docs, tutorials and examples on the Github:\n\nYou can find [swiper-react-component examples here](https://github.com/Ahmed-Osama-Salem/swiper-react-component-demo).\n\n## Styles\n\n> 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.\n\n```jsx\nimport '@ahmed-osama-salem/swiper-react-component/dist/style.css';\n```\n\nfor example in `next app router` in `layout.tsx`\n\n```jsx\nimport './globals.css';\nimport { Nunito } from 'next/font/google';\n\nimport '@ahmed-osama-salem/swiper-react-component/dist/style.css'; // HERE\n\nconst nunito = Nunito({ subsets: ['latin'] });\n\nexport const metadata = {\n title: 'Create Next App',\n description: 'Generated by create next app',\n};\n\nexport default function RootLayout({\n children,\n}: {\n children: React.ReactNode,\n}) {\n return (\n \n {children}\n \n );\n}\n```\n\n## 🚀 Usage\n\n> your first swiper component\n\n```jsx\nimport { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';\n\ninterface ShapeOneProps {\n item?: { id: number };\n}\n\n// THIS IS YOUR SWIPERSLIDE COMPONENT THAT AUTOMATICALLY READ EVERY OBJECT OF YOUR DATA AS item prop\n// YOU CAN CUSTOMIZE YOUR OWN\n\nconst ShapeOne = (props: ShapeOneProps) => {\n return (\n \n {props.item?.id}\n
\n );\n};\n\nconst SwiperPagination = () => {\n // Your custom data you can add any data like you want , but must have an id key\n const data = [\n { id: 1 },\n { id: 2 },\n { id: 3 },\n { id: 4 },\n { id: 5 },\n { id: 6 },\n { id: 7 },\n ];\n\n return (\n \n \n \n \n
\n );\n};\n\nexport default SwiperPagination;\n```\n\n> swiper component can easy handle api data by passing your api data state\n\n```jsx\nimport { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';\nimport axios from 'axios';\nimport { useEffect, useState } from 'react';\n\nconst ShapeOne = ({\n item,\n}: {\n item?: { id: number, urls: { raw: string } },\n}) => {\n return (\n \n );\n};\n\nconst SwiperWithApi = () => {\n const [data, setData] = useState([]);\n\n const getRandomData = async () => {\n const res = await axios\n .get(\n 'https://api.unsplash.com/photos/?client_id=9dfwtUcXdaD9C3I6HXgAq-3R4Ceyry8mv9ryFvd54dA'\n )\n .then(data => {\n setData(data.data);\n })\n .catch(err => {\n return err;\n });\n\n return res;\n };\n\n useEffect(() => {\n getRandomData();\n }, []);\n\n return (\n \n \n \n );\n};\n\nexport default SwiperWithApi;\n```\n\n> `swiperProps` can provide any props from swiper lib from one prop\n\n```jsx\n\n \n\n```\n\n## Props\n\n| Prop | Type | Description
|\n| :---------------------------- | :-----------------------: | :----------------------------------------------------------------------------------------------------------------------------------- |\n| item
_(required)_ | object[] | slides data with the following keys: `id` is the primary **Example**: `[{id: 1, anything: 'sub'}, { id: 2, anything: \"sub 2\"}]` |\n| 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. |\n| direction
_(recommended)_ | string | by default is horizontal
`\"horizontal\" or \"vertical\"`
|\n| slidesPerView | number | number of how may slide show per view of swiper
by default is `4` |\n| spaceBetween | number | number of gaps between slides
by default is `30` |\n| pagination | boolean | `true` if you want to add pagination |\n| navigation | boolean | `true` if you want to add navigation |\n| swiperContainerClass | string | class of main swiper container accept any css class ,tailwind or bootstrap classes |\n| swiperSlideClass | string | class of swiper slides accept any css class ,tailwind or bootstrap classes. |\n| swiperProps | SwiperOptions | this prop catches any option or props in swiper lib and give you many option to handle your swiper . |\n\n\n\n\n\n\n## Browser Compatibility\n\n| Browser | Works? |\n| :------ | :----- |\n| Chrome | Yes |\n| Firefox | Yes |\n| Safari | Yes |\n| IE 11 | Yes |\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome.
\nFeel free to check [issues page](https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues) if you want to contribute.
\n[Check the contributing guide](./CONTRIBUTING.md).
\n\n## Author\n\n👤 **Ahmed Osama**\n\n- Linkedin: [@AhmedOsama](https://www.linkedin.com/in/ahmed-osama-083602243/)\n- Github: [Ahmed Osama](https://github.com/Ahmed-Osama-Salem)\n\n## Show your support\n\nPlease ⭐️ this repository if this package helped you!\n\n
\n ![](\"https://c5.patreon.com/external/logo/become_a_patron_button@2x.png\")
\n\n\n## 📝 License\n\nCopyright © 2023 [Ahmed Osama](https://github.com/Ahmed-Osama-Salem).
\nThis project is [MIT](https://github.com/kefranabg/readme-md-generator/blob/master/LICENSE) licensed.\n","readmeFilename":"README.md","homepage":"https://github.com/Ahmed-Osama-Salem/swiper-react-component#readme","repository":{"type":"git","url":"git+https://github.com/Ahmed-Osama-Salem/swiper-react-component.git"},"bugs":{"url":"https://github.com/Ahmed-Osama-Salem/swiper-react-component/issues"}}