rex-pagination v1.1.0
ReX React UI Components Library
ReX React UI Component: rex-pagination
This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:
Github
https://github.com/rakuten-rex
NPM
https://www.npmjs.com/org/rakuten-rex
How it was built
- Build tool: webpack 4
- Codebase: Fork of Bootstrap project + ReX custom styles
- Css engine: Sass
- JavaScript component: React
How to install
npm install rex-pagination@1.1.0 --save
What you can do
When showing long lists of similar items, like search results, categories or news archive, loading all of the content at once will slow down the page and overwhelm the user. Pagination is suitable for lists of search results, items in a category, lists of articles, etc.
Live examples
For a complete guide of properties for React and HTML classes please visit the Storybook site:
https://rakuten-rex.github.io/rex-pagination/
JavaScript modules
React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
import 'rex-core'; // ReX Core dependency
import { Pagination, PaginationItem, PaginationLink } from 'rex-pagination';
function MyComponent() {
return (
<Pagination type="type1" aria-label="Page navigation example">
<PaginationItem>
<PaginationLink previous href="#" aria-label="Previous" />
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">1</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">2</PaginationLink>
</PaginationItem>
<PaginationItem active>3</PaginationItem>
<PaginationItem>
<PaginationLink href="#">4</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">5</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink next href="#" aria-label="Next" />
</PaginationItem>
</Pagination>
);
}
CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import 'rex-core/css'; // ReX Core dependency
import 'rex-pagination/css';
function MyComponent() {
return (
<ol aria-label="Page navigation example" class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true" class="rex-icon chevron-left"></span><i class="sr-only">Previous</i>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li class="active">
<span>3</span>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true" class="rex-icon chevron-right"></span><i class="sr-only">Next</i>
</a>
</li>
</ol>
);
}
Static HTML
Add it from our CDN into your HTML template or HTML static page.
For development mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rex-pagination -->
<link href="https://r.r10s.jp/com/rex/rex-pagination/1.1.0/rex-pagination.development.css" rel="stylesheet">
For production mode:
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rex-pagination -->
<link href="https://r.r10s.jp/com/rex/rex-pagination/1.1.0/rex-pagination.production.min.css" rel="stylesheet">
Example:
<div class="rex-css-style my-component">
<ol aria-label="Page navigation example" class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true" class="rex-icon chevron-left"></span><i class="sr-only">Previous</i>
</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li class="active">
<span>3</span>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true" class="rex-icon chevron-right"></span><i class="sr-only">Next</i>
</a>
</li>
</ol>
</div>
Javascript and React related documents
Take a look to this nice documentation pages to be more familiar with React and modern Javascript:
Official site
https://reactjs.org/docs/getting-started.html
Google Web Fundamentals (the whole site is a must to read)
https://developers.google.com/web/fundamentals/
Webpack as magic bundler
Composing Software series (how to understand Funcional Programming)
https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea
Common React patterns
Understanding Storybook with nice images
https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07
Some guidelines for clean code
5 years ago