Skip to content

Instantly share code, notes, and snippets.

@alexbenic
Created June 13, 2019 21:37
Show Gist options
  • Save alexbenic/eab85ec4f59615a974337f43c657e936 to your computer and use it in GitHub Desktop.
Save alexbenic/eab85ec4f59615a974337f43c657e936 to your computer and use it in GitHub Desktop.
Example of composition of React components in TypeScript
import React, { Component } from 'react';
import { Pagination as ReactBootstrapPagination } from 'react-bootstrap';
interface PaginationProps extends ReactBootstrapPagination.PaginationProps {
onPaginationItemClick: React.MouseEventHandler;
totalPages: number;
activePage: number;
}
export class Pagination extends Component<PaginationProps> {
public render(): JSX.Element {
const {
totalPages,
activePage,
onPaginationItemClick,
...rest
} = this.props;
// http://2ality.com/2018/12/creating-arrays.html
return (
<ReactBootstrapPagination {...rest}>
<ReactBootstrapPagination.Prev />
{Array.from({ length: totalPages }).map((_, i) => (
<ReactBootstrapPagination.Item
key={i}
active={activePage === i + 1}
onClick={onPaginationItemClick}
>
{i + 1}
</ReactBootstrapPagination.Item>
))}
<ReactBootstrapPagination.Next />
</ReactBootstrapPagination>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment