+ );
+};
diff --git a/samples/react-my-events/src/shared/components/FilmstripLayout/index.ts b/samples/react-my-events/src/shared/components/FilmstripLayout/index.ts
new file mode 100644
index 000000000..db53a6c19
--- /dev/null
+++ b/samples/react-my-events/src/shared/components/FilmstripLayout/index.ts
@@ -0,0 +1 @@
+export * from "./FilmstripLayout";
diff --git a/samples/react-my-events/src/shared/components/Pagination/IPagingProps.ts b/samples/react-my-events/src/shared/components/Pagination/IPagingProps.ts
new file mode 100644
index 000000000..c1fa8fbe7
--- /dev/null
+++ b/samples/react-my-events/src/shared/components/Pagination/IPagingProps.ts
@@ -0,0 +1,9 @@
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
+
+export interface IPaginationProps {
+ currentPage: number;
+ totalItems: number;
+ itemsCountPerPage: number;
+ showPageNum: boolean;
+ onPageUpdate: (pageNumber: number) => void;
+}
diff --git a/samples/react-my-events/src/shared/components/Pagination/Pagination.module.scss b/samples/react-my-events/src/shared/components/Pagination/Pagination.module.scss
new file mode 100644
index 000000000..d9d003fe6
--- /dev/null
+++ b/samples/react-my-events/src/shared/components/Pagination/Pagination.module.scss
@@ -0,0 +1,47 @@
+@import "~office-ui-fabric-react/dist/sass/References.scss";
+
+.Pagination {
+ width: 100%;
+ min-width: 240px;
+ text-align: center;
+ margin: 0;
+ padding: 2px 0;
+ border: 1px solid transparent;
+ position: relative;
+ .next,
+ .prev {
+ margin: 0;
+ display: inline-block;
+ border: none;
+ }
+
+ .nogo {
+ color: $ms-color-neutralTertiary!important;
+ }
+
+ button {
+ font-size: 14px;
+ font-weight: 400;
+ padding: 8px 4px;
+ margin: 0 8px;
+ cursor: pointer;
+ cursor: hand;
+ position: relative;
+ height: 32px !important;
+ display: none;
+ outline: 0;
+
+ &:hover, &:active {
+ color: "[theme:buttonTextCheckedHovered, default: #000]"
+ }
+
+ }
+
+ &.noPageNum {
+ text-align: left;
+
+ .next {
+ float: right;
+ }
+ }
+}
diff --git a/samples/react-my-events/src/shared/components/Pagination/Pagination.tsx b/samples/react-my-events/src/shared/components/Pagination/Pagination.tsx
new file mode 100644
index 000000000..9747ebfb1
--- /dev/null
+++ b/samples/react-my-events/src/shared/components/Pagination/Pagination.tsx
@@ -0,0 +1,75 @@
+import { ActionButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { Icon } from "office-ui-fabric-react/lib/Icon";
+import { css } from "office-ui-fabric-react/lib/Utilities";
+import * as React from "react";
+import { IPaginationProps } from ".";
+import styles from "./Pagination.module.scss";
+import * as strings from "ReactMyEventsWebPartStrings";
+import { useCallback } from 'react';
+
+/**
+ * A custom pagination control designed to look & feel like Office UI Fabric
+ */
+export const Pagination = (props: IPaginationProps) => {
+ const { currentPage, totalItems, itemsCountPerPage } = props;
+
+ // calculate the page situation
+ const numberOfPages: number = Math.round(totalItems / itemsCountPerPage);
+
+ // we disable the previous button if we're on page 1
+ const prevDisabled: boolean = currentPage <= 1;
+
+ // we disable the next button if we're on the last page
+ const nextDisabled: boolean = currentPage >= numberOfPages;
+
+
+ /**
+ * Increments the page number unless we're on the last page
+ */
+ const _nextPage = useCallback((): void => {
+ if (props.currentPage < numberOfPages) {
+ props.onPageUpdate(props.currentPage + 1);
+ }
+ }, [props, numberOfPages]);
+
+ /**
+ * Decrements the page number unless we're on the first page
+ */
+ const _prevPage = useCallback((): void => {
+ if (props.currentPage > 1) {
+ props.onPageUpdate(props.currentPage - 1);
+ }
+ }, [props]);
+
+ return (
+
+ {
+ // we use the render custom icon method to render the icon consistently with the right icon
+ return (
+
+ );
+ }}
+ disabled={prevDisabled}
+ onClick={_prevPage}
+ ariaLabel="Prev"
+ >
+ Prev
+ {/* NOT IMPLEMENTED: Page numbers aren't shown here, but we'll need them if we want this control to be reusable */}
+ {
+ // we use the render custom menu icon method to render the icon to the right of the text
+ return (
+
+ );
+ }}
+ onClick={_nextPage}
+ ariaLabel="Next"
+ >
+ Next
+
+