Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elmehdibm/react-basic-items-pagination
Simple and Easy way to render set ot items and costumize them
https://github.com/elmehdibm/react-basic-items-pagination
Last synced: about 1 month ago
JSON representation
Simple and Easy way to render set ot items and costumize them
- Host: GitHub
- URL: https://github.com/elmehdibm/react-basic-items-pagination
- Owner: elmehdibm
- License: mit
- Created: 2019-05-12T16:33:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T17:57:10.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T17:26:06.188Z (about 1 month ago)
- Language: JavaScript
- Size: 4.87 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-morocco - react-basic-items-pagination - basic-items-pagination.svg?style=social)](https://github.com/elmehdibm/react-basic-items-pagination/stargazers) - A react component helper to render set of items. by [@elmehdibm](https://github.com/elmehdibm) (Uncategorized / Uncategorized)
README
# React Basic Items Pagination
> A LightWeight component helper in React developement
The 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.
Now 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 !
[Click me to see a demonstration ✋ !](https://demo-react-basic-items-pagination.netlify.com/)
Let's Begin 😎 !
## Table of Contents
---
## Introduction
------
Take 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* 🤣 🤣 🤣 )
### ► Specifications :
• Easy to use 😉
• Full style customization ✂️
• Place it anywhere in your code, it'll work 🎯
• All Browsers(IE, Firefox, Chrome ...) Support 🚀
### ► Actual & Upcoming Features :
☑️ Rendering Responsively the set of Items
☑️ Full Overriding Styles of Elements
⏹️ Multiple Displaying Modes (Choosing title/image positions)
⏹️ Supporting Fetching data by a given url
⏹️ Pagination & Lazy loading on fetching data
⏹️ Supporting Items that display media (video, gifs ...)
## Getting Started
------
It'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 !
### ► Prerequisites
Since you are working with react, it's fine you'll not need to install any other dependancy, 'React >= 16.0' is the only dependancy of this helper 🤗.
### ► Installing
This package is available in npm repository as react-basic-items-pagination.
`````
npm install react-basic-items-pagination --save
`````
Or by Using Yarn.
`````
yarn add react-basic-items-pagination --save
`````
Now wherever you want in your project, you can import it
`````
import BasicItemsPagination from 'react-basic-items-pagination';
`````
### ► Example
*It's so simple ;) , now it's ready to use just by calling the tag of BasicItemsPagination ; For more clarification ↓↓↓ check the example below ↓↓↓*
The sample code :
```
{
Whatever you want ;) !
{item.id} // You'll need the item object for some actions
}
}
/>
```
The format of Data :
```
import HxHBoss from `${your-path}/img/HxH-boss.jpg`;
import LawKid from `${your-path}/img/Law-Kid.jpg`;
import LuffyQuote from `${your-path}/img/Luffy-Punch-Line.jpg`;
import PirateKings from `${your-path}/img/Pirate-Kings.jpg`;
mockedData = [
{
"title": "HxH Boss",
"image": HxHBoss,
"description": "The boss of spider bands in HunterXHunter"
},
{
"title": "Trafalgaw Law Kid",
"image": LawKid,
"description": "Law Holding his Ope-Ope Devil Fruit"
},
{
"title": "Luffy Quote",
"image": LuffyQuote,
"description": "If you don't take risks !\nYou can't create A Future !\nDamn Right :D !"
},
{
"title": "One Piece Pirate Kings",
"image": PirateKings,
"description": "Luffy , Roger and Rayleigh !\n Such Epicness in one picture !"
}
];
```
The output result :
### ► More Costumizing
You'll notice that the Example above need to be more stylish !
Don't worry, you can add a costum css styles in each composant in our set of items.
We can override the style of this properties :
-
imageStyle -
boxStyle -
childrenStyle
Let's add some shadowing and spacing and see the results !
````
## Authors
-------
* **Boumhicha El Mehdi** - *Initial work* - [Elmehdibm](https://github.com/elmehdibm/)
(*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 * 🙏)
## License
--------
This project is licensed under the MIT License - see the [LICENSE.md](.\LICENSE.md) file for details