{"id":13677807,"url":"https://github.com/elmehdibm/react-basic-items-pagination","last_synced_at":"2025-04-29T12:31:54.769Z","repository":{"id":35015678,"uuid":"186278716","full_name":"elmehdibm/react-basic-items-pagination","owner":"elmehdibm","description":"Simple and Easy way to render set ot items and costumize them","archived":false,"fork":false,"pushed_at":"2023-01-06T17:57:10.000Z","size":5104,"stargazers_count":6,"open_issues_count":13,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-06T17:26:06.188Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elmehdibm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-12T16:33:01.000Z","updated_at":"2021-01-07T21:09:44.000Z","dependencies_parsed_at":"2023-01-15T12:15:18.612Z","dependency_job_id":null,"html_url":"https://github.com/elmehdibm/react-basic-items-pagination","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmehdibm%2Freact-basic-items-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmehdibm%2Freact-basic-items-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmehdibm%2Freact-basic-items-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elmehdibm%2Freact-basic-items-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elmehdibm","download_url":"https://codeload.github.com/elmehdibm/react-basic-items-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224173169,"owners_count":17268059,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T13:00:47.316Z","updated_at":"2024-11-11T20:30:22.671Z","avatar_url":"https://github.com/elmehdibm.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# React Basic Items Pagination\n\n\u003e A LightWeight component helper in React developement\n\nThe appearance of Items is a common thing in WebSites, you can't find any E-commerce website without a list of articles to purchase, if you know the importance of this then take a look at this helper.\u003cbr\u003e\nNow it's possible in an easy way to create a set of items and costumize them according to your website  😁 , you have a project or work inside an organization , you want to save time or help your team , you can use this free helper to create an awesome set of items in less than one minute !\n\u003cbr\u003e\n[Click me to see a demonstration ✋ !](https://demo-react-basic-items-pagination.netlify.com/)\n\u003cbr\u003e\nLet's Begin  😎 !\n\u003cbr\u003e\n![image](https://drive.google.com/uc?export=view\u0026id=1vAlMWgpf4lJ6GWr6bIaIPW4QRlxB9SVH)\n## Table of Contents \n---\n\u003cdiv style=\"font-size:18px\"\u003e \u003ca style=\"color: currentColor\" href=\"#intro\"\u003e ➡️  Introduction \u003c/a\u003e \u003c/div\u003e\n\u003cul\u003e\n    \u003ca style=\"color: currentColor\" href=\"#specs\"\u003e\u003cli\u003eSpecifications\u003c/li\u003e\u003c/a\u003e\n    \u003ca style=\"color: currentColor\" href=\"#features\"\u003e\u003cli\u003eActual \u0026 Upcoming Features\u003c/li\u003e\u003c/a\u003e\n\u003c/ul\u003e\n\u003cdiv style=\"font-size:18px\"\u003e \u003ca  style=\"color: currentColor\" href=\"#start\"\u003e ➡️  Getting Started \u003c/a\u003e\u003c/div\u003e\n\u003cul\u003e\u003ca style=\"color:currentColor\" href=\"#prerequisites\"\u003e\u003cli\u003ePrequisities\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\n\u003cul\u003e\u003ca style=\"color:currentColor\" href=\"#install\"\u003e\u003cli\u003eInstalling\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\n\u003cul\u003e\u003ca style=\"color:currentColor\" href=\"#example\"\u003e\u003cli\u003eExample\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\n\u003cul\u003e\u003ca style=\"color:currentColor\" href=\"#custom\"\u003e\u003cli\u003eMore costumizing\u003c/li\u003e\u003c/a\u003e\u003c/ul\u003e\n\u003cdiv style=\"font-size:18px\"\u003e\u003ca style=\"color:currentColor\" href=\"#author\"\u003e ➡️  Authors \u003c/a\u003e\u003c/div\u003e\n\u003cdiv style=\"font-size:18px\"\u003e\u003ca style=\"color:currentColor\" href=\"#licence\"\u003e ➡️  Licence \u003c/a\u003e\u003c/div\u003e\n\n\u003cdiv id=\"intro\"\u003e\n\n## Introduction\n------\n\nTake a Look of the result of this awesome component helper ! ( *I've choosed the pictures below to illustrate my example because I'm an anime lover*  🤣  🤣  🤣  ) \n\u003cbr\u003e\n![image](https://drive.google.com/uc?export=view\u0026id=1ASBZVBkM7DKAcPz-xEVgEo0QQbHxvsM8)\n\n\u003cdiv id=\"specs\"\u003e\n\n### ► Specifications :\n• Easy to use 😉\n\u003cbr\u003e • Full style customization ✂️\n\u003cbr\u003e • Place it anywhere in your code, it'll work 🎯\n\u003cbr\u003e • All Browsers(IE, Firefox, Chrome ...) Support 🚀\n\n\u003c/div\u003e\n\u003cdiv id =\"features\"\u003e\n\n###  ►  Actual \u0026 Upcoming Features :\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☑️ Rendering Responsively the set of Items\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;☑️ Full Overriding Styles of Elements\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;⏹️ Multiple Displaying Modes (Choosing title/image positions)\u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;⏹️ Supporting Fetching data by a given url \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;⏹️ Pagination \u0026 Lazy loading on fetching data \u003cbr\u003e\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;⏹️ Supporting Items that display media (video, gifs ...) \u003cbr\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv id=\"start\"\u003e\n\n## Getting Started\n------\nIt's simple whether you are a newbie or expert with React, just by following the instructions below you'll be able to use this library and do this cool stuff !\n\u003cdiv id=\"prerequisites\"\u003e\n\n###  ►  Prerequisites\n\u003c/div\u003e\n\nSince you are working with react, it's fine you'll not need to install any other dependancy, 'React \u003e= 16.0' is the only dependancy of this helper 🤗.\n\u003cdiv id=\"install\"\u003e\n\n###  ►  Installing\n\u003c/div\u003e\n\nThis package is available in npm repository as react-basic-items-pagination.\n`````\nnpm install react-basic-items-pagination --save\n`````\nOr by Using Yarn.\n`````\nyarn add react-basic-items-pagination --save\n`````\nNow wherever you want in your project, you can import it\n`````\nimport BasicItemsPagination from 'react-basic-items-pagination';\n`````\n\u003cdiv id=\"example\"\u003e\n\n###  ►  Example\n\u003c/div\u003e\n\n*It's so simple ;) , now it's ready to use just by calling the tag of BasicItemsPagination ; For more clarification ↓↓↓ check the example below ↓↓↓*\nThe sample code :\n```\n\u003cBasicItemsPagination\n    height={400} // height of each Item\n    verticalSpacing={5} // The space of Items Vertically\n    horizontalSpacing={5} // The space of Items Horizontally\n    itemsPerRow={2} // Number of Items in each row of the page\n    itemsNumber={4} // Number of Items in each page\n    withImage // Whether the Item contain Image or not\n    data={mockedData} // We Provide Data that contain the title , description and image url of the items\n    imageStyle={ // We can choose the rate size of image contained in each Item\n        {\n        \"heightRate\": 100,\n        \"widthRate\": 50\n        }\n    }\n    childrenContent={ // Wanna add some button for action or whatever, add it here !\n        (item) =\u003e {\n            \u003cdiv\u003e\n                Whatever you want ;) !\n                {item.id} // You'll need the item object for some actions\n            \u003c/div\u003e\n        }\n    }\n/\u003e\n```\nThe format of Data :\n```\nimport HxHBoss from `${your-path}/img/HxH-boss.jpg`;\nimport LawKid from `${your-path}/img/Law-Kid.jpg`;\nimport LuffyQuote from `${your-path}/img/Luffy-Punch-Line.jpg`;\nimport PirateKings from `${your-path}/img/Pirate-Kings.jpg`;\n\n mockedData = [\n    {\n        \"title\": \"HxH Boss\",\n        \"image\": HxHBoss,\n        \"description\": \"The boss of spider bands in HunterXHunter\"\n    },\n    {\n        \"title\": \"Trafalgaw Law Kid\",\n        \"image\": LawKid,\n        \"description\": \"Law Holding his Ope-Ope Devil Fruit\"\n    },\n    {\n        \"title\": \"Luffy Quote\",\n        \"image\": LuffyQuote,\n        \"description\": \"If you don't take risks !\\nYou can't create A Future !\\nDamn Right :D !\"\n    },\n    {\n        \"title\": \"One Piece Pirate Kings\",\n        \"image\": PirateKings,\n        \"description\": \"Luffy , Roger and Rayleigh !\\n Such Epicness in one picture !\"\n    }\n  ];\n```\nThe output result :\n\u003cbr\u003e\u003cbr\u003e\n![image](https://drive.google.com/uc?export=view\u0026id=1fw1llhEseuTqODh9wIvbnIvgp2fSh6M7)\n\n\u003cdiv id=\"custom\"\u003e\n\n### ► More Costumizing \n\u003c/div\u003e\nYou'll notice that the Example above need to be more stylish !\n\u003cbr\u003e\nDon't worry, you can add a costum css styles in each composant in our set of items.\n\u003cbr\u003e\nWe can override the style of this properties :\n\u003cbr\u003e\n\u003cul\u003e\n\u003cli\u003e\nimageStyle\n\u003c/li\u003e\n\u003cli\u003e\nboxStyle\n\u003c/li\u003e\n\u003cli\u003e\nchildrenStyle\n\u003c/li\u003e\n\u003c/ul\u003e\nLet's add some shadowing and spacing and see the results !\n\u003cbr\u003e\n\n````\n\u003cBasicItemsPagination\n    ....\n    verticalSpacing={4}\n    horizontalSpacing={4}\n    ....\n    imageStyle={\n        {\n        \"heightRate\": 100,\n        \"widthRate\": 50,\n        \"borderTopLeftRadius\": \"10px\",\n        \"borderBottomLeftRadius\": \"10px\",\n        \"boxShadow\": \"4px 0px 5px 1px gray\"\n        }\n    }\n    boxStyle={\n        {\n        \"borderRadius\": \"10px\",\n        \"boxShadow\": \"0px 0px 10px 0px\"\n        }\n    }\n````\nThe output result :\n\u003cbr\u003e\n![image](https://drive.google.com/uc?export=view\u0026id=1AxfQa1LZBbjamvVj7PIrtvGRzRnf5cqC)\n\n\u003c/div\u003e\n\u003cdiv id=\"author\"\u003e\n\n## Authors\n\u003c/div\u003e\n\n-------\n* **Boumhicha El Mehdi** - *Initial work* - [Elmehdibm](https://github.com/elmehdibm/)\n\u003cbr\u003e\n(*Dear developers you're welcome to contribute in this work or just try this solution and leave some comments or maybe some stars to make the helper more available to everyone * 🙏)\n\n\u003cdiv id=\"licence\"\u003e\n\n## License\n\u003c/div\u003e\n\n--------\nThis project is licensed under the MIT License - see the [LICENSE.md](.\\LICENSE.md) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmehdibm%2Freact-basic-items-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felmehdibm%2Freact-basic-items-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felmehdibm%2Freact-basic-items-pagination/lists"}