diff --git a/.eslintrc.js b/.eslintrc.js
index 102807e..cd043e7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,17 +12,37 @@ module.exports = {
     ],
     rules: {
         "no-console": "off",
-        "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+        "@typescript-eslint/camelcase": "off",
         "@typescript-eslint/explicit-function-return-type": ["off"],
+        "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
+        "react/prop-types": "off",
+        "react/display-name": "off",
+        "no-unused-expressions": "off",
+        "no-useless-concat": "off",
+        "no-useless-constructor": "off",
+        "no-unexpected-multiline": "off",
+        "default-case": "off",
         "@typescript-eslint/no-use-before-define": "off",
-        "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/ban-ts-ignore": "off",
         "@typescript-eslint/no-empty-function": "off",
-        "react/prop-types": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/ban-types": "off",
+        "@typescript-eslint/ban-ts-comment": "off",
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/indent": "off",
+        "@typescript-eslint/member-delimiter-style": "off",
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "@typescript-eslint/no-use-before-define": "off",
+        "@typescript-eslint/explicit-function-return-type": "off",
+        "no-extra-semi": "off",
+        "no-mixed-spaces-and-tabs": "off",
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
         "no-prototype-builtins": "off",
     },
-    env: {
-        jest: true,
-    },
+    plugins: ["@typescript-eslint", "react-hooks"],
     settings: {
         react: {
             pragma: "React",
diff --git a/package.json b/package.json
index 0ac837d..67ec1dd 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
         "type": "git",
         "url": "git+https://github.com/eyeseetea/d2-ui-components.git"
     },
-    "version": "2.1.0",
+    "version": "2.2.0",
     "main": "index.js",
     "types": "index.d.ts",
     "peerDependencies": {
@@ -57,7 +57,7 @@
         "react": "^16.8.15",
         "react-dom": "^16.8.15",
         "ts-jest": "^24.1.0",
-        "typescript": "^3.6.3"
+        "typescript": "4.0.2"
     },
     "dependencies": {
         "@date-io/core": "^1.3.6",
diff --git a/src/confirmation-dialog/ConfirmationDialog.tsx b/src/confirmation-dialog/ConfirmationDialog.tsx
index 7548555..1e64e94 100644
--- a/src/confirmation-dialog/ConfirmationDialog.tsx
+++ b/src/confirmation-dialog/ConfirmationDialog.tsx
@@ -11,9 +11,9 @@ import _ from "lodash";
 import React, { ReactNode } from "react";
 import i18n from "../utils/i18n";
 
-export interface ConfirmationDialogProps extends Partial<DialogProps> {
+export interface ConfirmationDialogProps extends Partial<Omit<DialogProps, "title">> {
     isOpen?: boolean;
-    title?: string;
+    title?: string | ReactNode;
     description?: string | ReactNode;
     onSave?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     onCancel?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
diff --git a/src/data-table/ColumnSelectorDialog.tsx b/src/data-table/ColumnSelectorDialog.tsx
index 6ee95b6..f6c749e 100644
--- a/src/data-table/ColumnSelectorDialog.tsx
+++ b/src/data-table/ColumnSelectorDialog.tsx
@@ -1,4 +1,3 @@
-import i18n from "@dhis2/d2-i18n";
 import { Checkbox, DialogContent } from "@material-ui/core";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
@@ -7,6 +6,7 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import React from "react";
 import { ConfirmationDialog, ReferenceObject, TableColumn } from "..";
+import i18n from "../utils/i18n";
 
 interface ColumnSelectorDialogProps<T extends ReferenceObject> {
     columns: TableColumn<T>[];
diff --git a/src/data-table/DataTable.tsx b/src/data-table/DataTable.tsx
index 7e1b3e9..91f105f 100644
--- a/src/data-table/DataTable.tsx
+++ b/src/data-table/DataTable.tsx
@@ -127,7 +127,7 @@ export function DataTable<T extends ReferenceObject = TableObject>(props: DataTa
 
     const [stateSelection, updateSelection] = useState(initialState.selection || []);
     const [statePagination, updatePagination] = useState(initialState.pagination);
-    const [visibleColumns, updateVisibleColumns] = useState([]);
+    const [visibleColumns, updateVisibleColumns] = useState<Array<keyof T>>([]);
     const [stateSorting, updateSorting] = useState(
         initialState.sorting || {
             field: columns[0].name,
@@ -164,10 +164,11 @@ export function DataTable<T extends ReferenceObject = TableObject>(props: DataTa
     const enableMultipleAction = _.isUndefined(forceSelectionColumn)
         ? _.some(availableActions, "multiple")
         : forceSelectionColumn;
+    const totalRows = pagination.total ? pagination.total : rows.length;
 
     const selectionMessages = hideSelectionMessages
         ? []
-        : getSelectionMessages(rowObjects, selection, pagination, ids, childrenKeys);
+        : getSelectionMessages(rowObjects, selection, totalRows, ids, childrenKeys);
 
     // Contextual menu
     const [contextMenuTarget, setContextMenuTarget] = useState<number[] | null>(null);
diff --git a/src/data-table/DataTableBody.tsx b/src/data-table/DataTableBody.tsx
index 9a394aa..3ba5940 100644
--- a/src/data-table/DataTableBody.tsx
+++ b/src/data-table/DataTableBody.tsx
@@ -1,4 +1,3 @@
-import i18n from "@dhis2/d2-i18n";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
@@ -23,6 +22,7 @@ import {
 } from "./types";
 import { formatRowValue } from "./utils/formatting";
 import { isEventCtrlClick, parseActions, updateSelection } from "./utils/selection";
+import i18n from "../utils/i18n";
 
 const defaultMouseActionsMapping: MouseActionsMapping = {
     left: { type: "primary" },
@@ -78,13 +78,13 @@ export function DataTableBody<T extends ReferenceObject>(props: DataTableBodyPro
         rowConfig,
         visibleColumns,
         sorting,
-        availableActions,
+        availableActions = [],
         selected,
         onChange = _.noop,
         openContextualMenu = _.noop,
         enableMultipleAction,
         loading,
-        childrenKeys,
+        childrenKeys = [],
         mouseActionsMapping = defaultMouseActionsMapping,
     } = props;
     const { field, order } = sorting;
@@ -153,8 +153,9 @@ export function DataTableBody<T extends ReferenceObject>(props: DataTableBodyPro
             });
         };
 
-        const { style, cellStyle, disabled, selectable = !disabled } = rowConfig(row);
-        const selectedItem: Partial<TableSelection> = _.find(selected, { id: row.id });
+        const config = rowConfig ? rowConfig(row) : {};
+        const { style, cellStyle, disabled, selectable = !disabled } = config;
+        const selectedItem = _.find(selected, { id: row.id });
         const { checked = !!selectedItem, indeterminate = false, icon = <CheckBoxTwoToneIcon /> } =
             selectedItem || {};
         const rowClassName = _.compact([
diff --git a/src/data-table/DataTableHeader.tsx b/src/data-table/DataTableHeader.tsx
index 3792735..8910652 100644
--- a/src/data-table/DataTableHeader.tsx
+++ b/src/data-table/DataTableHeader.tsx
@@ -1,4 +1,3 @@
-import i18n from "@dhis2/d2-i18n";
 import Checkbox from "@material-ui/core/Checkbox";
 import IconButton from "@material-ui/core/IconButton";
 import { makeStyles } from "@material-ui/core/styles";
@@ -7,10 +6,11 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import TableSortLabel from "@material-ui/core/TableSortLabel";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import ViewColumnIcon from "@material-ui/icons/ViewColumn";
 import SettingsIcon from "@material-ui/icons/Settings";
+import ViewColumnIcon from "@material-ui/icons/ViewColumn";
 import _ from "lodash";
 import React, { MouseEvent, useState } from "react";
+import i18n from "../utils/i18n";
 import ColumnSelectorDialog from "./ColumnSelectorDialog";
 import { ContextualMenu } from "./ContextualMenu";
 import { DataTableNotifications } from "./DataTableNotifications";
@@ -67,13 +67,13 @@ export function DataTableHeader<T extends ReferenceObject>(props: DataTableHeade
         globalActions,
         ids,
         visibleColumns,
-        onVisibleColumnsChange = _.noop,
+        onVisibleColumnsChange,
         sorting,
-        onSortingChange = _.noop,
+        onSortingChange,
         allSelected = false,
         tableNotifications = [],
-        handleSelectionChange = _.noop,
-        onSelectAllClick = _.noop,
+        handleSelectionChange,
+        onSelectAllClick,
         enableMultipleAction,
         hideColumnVisibilityOptions = false,
         hideSelectAll = false,
@@ -86,7 +86,7 @@ export function DataTableHeader<T extends ReferenceObject>(props: DataTableHeade
 
     const createSortHandler = (property: keyof T) => (_event: React.MouseEvent<unknown>) => {
         const isDesc = field === property && order === "desc";
-        onSortingChange({ field: property, order: isDesc ? "asc" : "desc" });
+        if (onSortingChange) onSortingChange({ field: property, order: isDesc ? "asc" : "desc" });
     };
 
     const tableActions = _.compact([
@@ -115,7 +115,7 @@ export function DataTableHeader<T extends ReferenceObject>(props: DataTableHeade
                 <ColumnSelectorDialog
                     columns={columns}
                     visibleColumns={visibleColumns}
-                    onChange={onVisibleColumnsChange}
+                    onChange={onVisibleColumnsChange || _.noop}
                     onCancel={() => setOpenColumnSettings(false)}
                 />
             )}
@@ -160,7 +160,7 @@ export function DataTableHeader<T extends ReferenceObject>(props: DataTableHeade
                         <TableCell padding="none" colSpan={columns.length + 2}>
                             <DataTableNotifications
                                 messages={tableNotifications}
-                                updateSelection={handleSelectionChange}
+                                updateSelection={handleSelectionChange || _.noop}
                             />
                         </TableCell>
                     </TableRow>
diff --git a/src/data-table/DataTablePagination.tsx b/src/data-table/DataTablePagination.tsx
index d80c829..34d1638 100644
--- a/src/data-table/DataTablePagination.tsx
+++ b/src/data-table/DataTablePagination.tsx
@@ -1,10 +1,11 @@
 import Pagination from "@material-ui/core/TablePagination";
 import _ from "lodash";
 import React from "react";
+import { PartialBy } from "../utils/types";
 import { PaginationOptions, TablePagination } from "./types";
 
 export interface DataTablePaginationProps {
-    pagination: TablePagination;
+    pagination: PartialBy<TablePagination, "total">;
     paginationOptions: Partial<PaginationOptions>;
     defaultTotal: number;
     onChange?(newPagination: TablePagination): void;
diff --git a/src/data-table/DetailsBox.tsx b/src/data-table/DetailsBox.tsx
index e2fb9cc..00b201e 100644
--- a/src/data-table/DetailsBox.tsx
+++ b/src/data-table/DetailsBox.tsx
@@ -1,10 +1,9 @@
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
+import { makeStyles } from "@material-ui/core/styles";
 import CloseIcon from "@material-ui/icons/Close";
-import i18n from "@dhis2/d2-i18n";
-
-import { ReferenceObject, ObjectsTableDetailField } from "./types";
+import React from "react";
+import i18n from "../utils/i18n";
+import { ObjectsTableDetailField, ReferenceObject } from "./types";
 import { formatRowValue } from "./utils/formatting";
 
 const useStyles = makeStyles({
diff --git a/src/data-table/ObjectsTable.tsx b/src/data-table/ObjectsTable.tsx
index 0d74464..882cf63 100644
--- a/src/data-table/ObjectsTable.tsx
+++ b/src/data-table/ObjectsTable.tsx
@@ -51,7 +51,7 @@ export function ObjectsTable<T extends ReferenceObject = TableObject>(props: Obj
         filterComponents: parentFilterComponents,
         sideComponents: parentSideComponents,
         resetKey = "",
-        childrenKeys,
+        childrenKeys = [],
         ...rest
     } = props;
     const classes = useStyles();
diff --git a/src/data-table/utils/selection.tsx b/src/data-table/utils/selection.tsx
index 177ad12..19ee836 100644
--- a/src/data-table/utils/selection.tsx
+++ b/src/data-table/utils/selection.tsx
@@ -1,13 +1,7 @@
-import i18n from "@dhis2/d2-i18n";
 import _ from "lodash";
 import { MouseEvent } from "react";
-import {
-    ReferenceObject,
-    TableAction,
-    TableNotification,
-    TablePagination,
-    TableSelection,
-} from "../types";
+import i18n from "../../utils/i18n";
+import { ReferenceObject, TableAction, TableNotification, TableSelection } from "../types";
 
 export function updateSelection<T extends ReferenceObject>(selected: TableSelection[], row: T) {
     const selectedIndex = _.findIndex(selected, { id: row.id });
@@ -59,7 +53,7 @@ export function parseActions<T extends ReferenceObject>(
 export function getSelectionMessages<T extends ReferenceObject>(
     rows: T[],
     tableSelection: TableSelection[],
-    pagination: TablePagination,
+    total: number,
     ids: string[],
     childrenKeys: string[]
 ): TableNotification[] {
@@ -77,11 +71,11 @@ export function getSelectionMessages<T extends ReferenceObject>(
 
     const selection = _.differenceBy(tableSelection, childrenIds, "id");
 
-    const allSelected = selection.length === pagination.total;
+    const allSelected = selection.length === total;
     const selectionInOtherPages = _.differenceBy(selection, rows, "id");
     const allSelectedInPage = _.differenceBy(rows, selection, "id").length === 0;
-    const multiplePagesAvailable = pagination.total > rows.length;
-    const selectAllImplemented = ids.length === pagination.total;
+    const multiplePagesAvailable = total > rows.length;
+    const selectAllImplemented = ids.length === total;
 
     return _.compact([
         allSelected
@@ -108,9 +102,7 @@ export function getSelectionMessages<T extends ReferenceObject>(
                   message: i18n.t("All {{total}} items on this page are selected.", {
                       total: rows.length,
                   }),
-                  link: i18n.t("Select all {{total}} items in all pages", {
-                      total: pagination.total,
-                  }),
+                  link: i18n.t("Select all {{total}} items in all pages", { total }),
                   newSelection: ids.map(id => ({ id })),
               }
             : null,
diff --git a/src/data-table/utils/sorting.tsx b/src/data-table/utils/sorting.tsx
index 0329a1b..198617e 100644
--- a/src/data-table/utils/sorting.tsx
+++ b/src/data-table/utils/sorting.tsx
@@ -6,7 +6,7 @@ import { ReactNode } from "react";
 export function sortObjects<T extends ReferenceObject>(
     rows: T[],
     columns: TableColumn<T>[],
-    tablePagination: TablePagination,
+    tablePagination: Pick<TablePagination, "page" | "pageSize">,
     tableSorting: TableSorting<T>
 ) {
     const { field, order } = tableSorting;
diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx
index 84a4d52..01cd79b 100644
--- a/src/date-picker/DatePicker.tsx
+++ b/src/date-picker/DatePicker.tsx
@@ -54,7 +54,7 @@ const getMaterialTheme = (isFilter: boolean, colors: Dictionary<string>) =>
     });
 
 export const DatePicker: React.FC<DatePickerProps> = ({
-    isFilter,
+    isFilter = false,
     errorStyle,
     errorText,
     ...datePickerProps
diff --git a/src/loading/LoadingConsumer.tsx b/src/loading/LoadingConsumer.tsx
index d4713d9..be71904 100644
--- a/src/loading/LoadingConsumer.tsx
+++ b/src/loading/LoadingConsumer.tsx
@@ -1,13 +1,11 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import { withStyles } from "@material-ui/core/styles";
-import LoadingContext from "./context";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import Typography from "@material-ui/core/Typography";
 import Divider from "@material-ui/core/Divider";
+import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import React from "react";
+import LoadingContext from "./context";
 
-const styles = _theme => ({
+const useStyles = makeStyles({
     loadingMask: {
         height: "100%",
         width: "100%",
@@ -33,12 +31,15 @@ const styles = _theme => ({
     },
 });
 
-const LoadingConsumer = props => {
-    const { classes } = props;
+const LoadingConsumer = () => {
+    const classes = useStyles();
 
     return (
         <LoadingContext.Consumer>
-            {({ isLoading, message, progress }) => {
+            {state => {
+                if (!state) throw new Error("Loading context has not been defined");
+                const { isLoading, message, progress = 0 } = state;
+
                 const hideMessage = !message || !message.trim();
                 return (
                     <div className={classes.loadingMask} hidden={!isLoading}>
@@ -71,8 +72,4 @@ const LoadingConsumer = props => {
     );
 };
 
-LoadingConsumer.propTypes = {
-    classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(LoadingConsumer);
+export default LoadingConsumer;
diff --git a/src/loading/LoadingProvider.tsx b/src/loading/LoadingProvider.tsx
index 4a10e6a..272f8e1 100644
--- a/src/loading/LoadingProvider.tsx
+++ b/src/loading/LoadingProvider.tsx
@@ -3,7 +3,7 @@ import LoadingContext from "./context";
 import LoadingConsumer from "./LoadingConsumer";
 import { LoadingOptions } from "./types";
 
-export const LoadingProvider = ({ children }) => {
+export const LoadingProvider: React.FC = ({ children }) => {
     const [state, setState] = useState<LoadingOptions>({
         isLoading: false,
         message: "",
diff --git a/src/loading/context.ts b/src/loading/context.ts
index ec22ebd..34d1b0a 100644
--- a/src/loading/context.ts
+++ b/src/loading/context.ts
@@ -1,3 +1,4 @@
 import React from "react";
+import { LoadingState } from "./types";
 
-export default React.createContext(undefined);
+export default React.createContext<LoadingState | undefined>(undefined);
diff --git a/src/loading/index.tsx b/src/loading/index.tsx
index b5298c9..0f54af5 100644
--- a/src/loading/index.tsx
+++ b/src/loading/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from "react";
-import loadingContext from "./context";
+import LoadingContext from "./context";
 import LoadingProvider from "./LoadingProvider";
 import { LoadingOptions, LoadingState } from "./types";
 
@@ -7,7 +7,7 @@ import { LoadingOptions, LoadingState } from "./types";
 export function withLoading(WrappedComponent: any) {
     return class extends React.Component {
         static displayName = `withLoading${WrappedComponent.displayName}`;
-        static contextType = loadingContext;
+        static contextType = LoadingContext;
 
         render() {
             return <WrappedComponent {...this.props} loading={this.context} />;
@@ -16,7 +16,9 @@ export function withLoading(WrappedComponent: any) {
 }
 
 export function useLoading() {
-    const contextValue = useContext<LoadingState>(loadingContext);
+    const contextValue = useContext<LoadingState | undefined>(LoadingContext);
+    if (!contextValue) throw new Error("Loading context has not been defined");
+
     const ref = useRef(contextValue);
     return ref.current;
 }
diff --git a/src/sharing/Table.tsx b/src/sharing/Table.tsx
index 57c1065..5bfc3cb 100644
--- a/src/sharing/Table.tsx
+++ b/src/sharing/Table.tsx
@@ -1,14 +1,12 @@
-import React from "react";
-
+import { WithStyles } from "@material-ui/core";
 import Divider from "@material-ui/core/Divider";
-import Typography from "@material-ui/core/Typography";
 import { withStyles } from "@material-ui/core/styles";
-import { WithStyles } from "@material-ui/core";
-
-import i18n from "../locales";
+import Typography from "@material-ui/core/Typography";
+import React from "react";
+import i18n from "../utils/i18n";
+import { ExternalAccess, GroupAccess, PublicAccess } from "./Access";
+import { AccessRule, MetaObject, SearchResult, ShareUpdate, SharingRule } from "./types";
 import UserSearch from "./UserSearch";
-import { PublicAccess, ExternalAccess, GroupAccess } from "./Access";
-import { AccessRule, SharingRule, MetaObject, ShareUpdate, SearchResult } from "./types";
 
 type Id = string;
 
diff --git a/src/snackbar/SnackbarConsumer.tsx b/src/snackbar/SnackbarConsumer.tsx
index 9ddc132..684a412 100644
--- a/src/snackbar/SnackbarConsumer.tsx
+++ b/src/snackbar/SnackbarConsumer.tsx
@@ -4,14 +4,14 @@ import green from "@material-ui/core/colors/green";
 import IconButton from "@material-ui/core/IconButton";
 import Snackbar from "@material-ui/core/Snackbar";
 import SnackbarContent from "@material-ui/core/SnackbarContent";
-import { Theme, withStyles } from "@material-ui/core/styles";
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
 import CloseIcon from "@material-ui/icons/Close";
 import ErrorIcon from "@material-ui/icons/Error";
 import InfoIcon from "@material-ui/icons/Info";
 import WarningIcon from "@material-ui/icons/Warning";
+//@ts-ignore
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import React from "react";
 import SnackbarContext from "./context";
 
@@ -27,52 +27,58 @@ const variantIcon = {
     info: InfoIcon,
 };
 
-const styles = (theme: Theme) => ({
-    root: {
-        bottom: 0,
-    },
-    success: {
-        backgroundColor: green[600],
-    },
-    error: {
-        backgroundColor: theme.palette.error.dark,
-    },
-    info: {
-        backgroundColor: theme.palette.primary.dark,
-    },
-    warning: {
-        backgroundColor: amber[700],
-    },
-    icon: {
-        fontSize: 20,
-    },
-    iconVariant: {
-        opacity: 0.9,
-        marginRight: theme.spacing(4), // Or anything between 30px and 38px
-    },
-    content: {
-        display: "flex" as const,
-        alignItems: "center" as const,
-        whiteSpace: "pre-wrap" as const,
-    },
-    message: {
-        maxHeight: 500,
-        overflow: "auto",
-        paddingRight: 10,
-    },
-});
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            bottom: 0,
+        },
+        success: {
+            backgroundColor: green[600],
+        },
+        error: {
+            backgroundColor: theme.palette.error.dark,
+        },
+        info: {
+            backgroundColor: theme.palette.primary.dark,
+        },
+        warning: {
+            backgroundColor: amber[700],
+        },
+        icon: {
+            fontSize: 20,
+        },
+        iconVariant: {
+            opacity: 0.9,
+            marginRight: theme.spacing(4), // Or anything between 30px and 38px
+        },
+        content: {
+            display: "flex" as const,
+            alignItems: "center" as const,
+            whiteSpace: "pre-wrap" as const,
+        },
+        message: {
+            maxHeight: 500,
+            overflow: "auto",
+            paddingRight: 10,
+        },
+    })
+);
 
-const SnackbarConsumer = props => {
-    const { classes } = props;
+const SnackbarConsumer = () => {
+    const classes = useStyles();
 
     return (
         <SnackbarContext.Consumer>
-            {({ isOpen, message, variant, closeSnackbar, autoHideDuration }) => {
-                const Icon = variantIcon[variant];
-                if (!Icon) {
+            {state => {
+                if (!state) throw new Error("Snackbar context has not been defined");
+                const { isOpen, message, variant, closeSnackbar, autoHideDuration } = state;
+
+                if (!variant || !variantIcon[variant]) {
                     throw new Error(`Unknown variant: ${variant}`);
                 }
 
+                const Icon = variantIcon[variant];
+
                 return (
                     <Snackbar
                         className={classes.root}
@@ -97,7 +103,6 @@ const SnackbarConsumer = props => {
                                     key="close"
                                     aria-label="Close"
                                     color="inherit"
-                                    className={classes.close}
                                     onClick={closeSnackbar}
                                 >
                                     <CloseIcon className={classes.icon} />
@@ -111,8 +116,4 @@ const SnackbarConsumer = props => {
     );
 };
 
-SnackbarConsumer.propTypes = {
-    classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SnackbarConsumer);
+export default SnackbarConsumer;
diff --git a/src/snackbar/SnackbarProvider.tsx b/src/snackbar/SnackbarProvider.tsx
index 7f92131..fcddeb3 100644
--- a/src/snackbar/SnackbarProvider.tsx
+++ b/src/snackbar/SnackbarProvider.tsx
@@ -3,7 +3,7 @@ import SnackbarContext from "./context";
 import SnackbarConsumer from "./SnackbarConsumer";
 import { SnackbarLevel, SnackbarOptions } from "./types";
 
-export const SnackbarProvider = ({ children }) => {
+export const SnackbarProvider: React.FC = ({ children }) => {
     const [state, setState] = useState<SnackbarOptions>({
         isOpen: false,
         message: "",
diff --git a/src/snackbar/context.ts b/src/snackbar/context.ts
index ec22ebd..c3afe58 100644
--- a/src/snackbar/context.ts
+++ b/src/snackbar/context.ts
@@ -1,3 +1,4 @@
 import React from "react";
+import { SnackbarState } from "./types";
 
-export default React.createContext(undefined);
+export default React.createContext<SnackbarState | undefined>(undefined);
diff --git a/src/snackbar/index.tsx b/src/snackbar/index.tsx
index 92028af..9412906 100644
--- a/src/snackbar/index.tsx
+++ b/src/snackbar/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from "react";
-import snackbarContext from "./context";
+import SnackbarContext from "./context";
 import SnackbarProvider from "./SnackbarProvider";
 import { SnackbarLevel, SnackbarOptions, SnackbarState } from "./types";
 
@@ -7,7 +7,7 @@ import { SnackbarLevel, SnackbarOptions, SnackbarState } from "./types";
 export function withSnackbar(WrappedComponent: any) {
     return class extends React.Component {
         static displayName = `withSnackbar${WrappedComponent.displayName}`;
-        static contextType = snackbarContext;
+        static contextType = SnackbarContext;
 
         render() {
             return <WrappedComponent {...this.props} snackbar={this.context} />;
@@ -15,8 +15,10 @@ export function withSnackbar(WrappedComponent: any) {
     };
 }
 
-export function useSnackbar() {
-    const contextValue = useContext<SnackbarState>(snackbarContext);
+export function useSnackbar(): SnackbarState {
+    const contextValue = useContext<SnackbarState | undefined>(SnackbarContext);
+    if (!contextValue) throw new Error("Snackbar context has not been defined");
+
     const ref = useRef(contextValue);
     return ref.current;
 }
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..ce7e0b4
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1 @@
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
diff --git a/src/wizard/FeedbackMessages.tsx b/src/wizard/FeedbackMessages.tsx
new file mode 100644
index 0000000..5af89d6
--- /dev/null
+++ b/src/wizard/FeedbackMessages.tsx
@@ -0,0 +1,30 @@
+import { makeStyles } from "@material-ui/core";
+import React from "react";
+
+export const FeedbackMessages: React.FC<FeedbackMessagesProps> = ({ messages }) => {
+    const classes = useStyles();
+
+    if (messages.length === 0) return null;
+
+    return (
+        <div className="Wizard-Messages">
+            <ul className={classes.messages}>
+                {messages.map((message, index) => (
+                    <li key={index}>{message}</li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export interface FeedbackMessagesProps {
+    messages: string[];
+}
+
+const useStyles = makeStyles(() => ({
+    messages: {
+        padding: 0,
+        listStyleType: "none",
+        color: "red",
+    },
+}));
diff --git a/src/wizard/Help.tsx b/src/wizard/Help.tsx
new file mode 100644
index 0000000..0a7019e
--- /dev/null
+++ b/src/wizard/Help.tsx
@@ -0,0 +1,30 @@
+import { ButtonProps, Icon, IconButton, Tooltip } from "@material-ui/core";
+import React from "react";
+import { DialogButton } from "../dialog-button/DialogButton";
+import i18n from "../utils/i18n";
+import { WizardStep } from "./Wizard";
+
+const HelpButton: React.FC<ButtonProps> = ({ onClick }) => (
+    <Tooltip title={i18n.t("Help")}>
+        <IconButton onClick={onClick}>
+            <Icon color="primary">help</Icon>
+        </IconButton>
+    </Tooltip>
+);
+
+export const Help: React.FC<HelpProps> = ({ step, currentStepKey = "" }) => (
+    <DialogButton
+        buttonComponent={HelpButton}
+        title={`${step.label} - ${i18n.t("Help")}`}
+        contents={step.help}
+        initialIsOpen={step.helpDialogIsInitialOpen}
+        isVisible={step.help && step.key === currentStepKey}
+    />
+);
+
+export interface HelpProps {
+    step: WizardStep;
+    currentStepKey?: string;
+}
+
+export default Help;
diff --git a/src/wizard/Navigation.tsx b/src/wizard/Navigation.tsx
new file mode 100644
index 0000000..3e60008
--- /dev/null
+++ b/src/wizard/Navigation.tsx
@@ -0,0 +1,87 @@
+import { Button, ButtonProps, makeStyles, Theme } from "@material-ui/core";
+import React, { useMemo } from "react";
+import i18n from "../utils/i18n";
+import { WizardStep } from "./Wizard";
+
+export const Navigation: React.FC<NavigationProps> = ({
+    steps,
+    disableNext,
+    disablePrev,
+    onNext,
+    onPrev,
+}) => {
+    const classes = useStyles();
+    const className = useMemo(() => ["Wizard-Navigation", classes.buttonContainer].join(" "), [
+        classes,
+    ]);
+
+    if (steps.length === 0) return null;
+
+    return (
+        <div className={className}>
+            <NavigationButton
+                disabled={disablePrev}
+                onClick={onPrev}
+                label={"← " + i18n.t("Previous")}
+            />
+
+            <NavigationButton
+                disabled={disableNext}
+                onClick={onNext}
+                label={i18n.t("Next") + " →"}
+            />
+        </div>
+    );
+};
+
+const NavigationButton: React.FC<NavigationButtonProps> = ({ disabled, onClick, label }) => {
+    const classes = useStyles();
+
+    const buttonStyleOverride = useMemo(
+        () => ({
+            disabled: classes.buttonDisabled,
+        }),
+        [classes]
+    );
+
+    return (
+        <Button
+            variant="contained"
+            classes={buttonStyleOverride}
+            disabled={disabled}
+            className={classes.button}
+            onClick={onClick}
+        >
+            {label}
+        </Button>
+    );
+};
+
+export interface NavigationProps {
+    steps: WizardStep[];
+    currentStepKey?: string;
+    disableNext: boolean;
+    disablePrev: boolean;
+    onNext: () => void;
+    onPrev: () => void;
+}
+
+interface NavigationButtonProps extends Pick<ButtonProps, "disabled" | "onClick"> {
+    label: string;
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+    button: {
+        margin: theme.spacing(1),
+        marginRight: 5,
+        padding: 10,
+    },
+    buttonDisabled: {
+        color: "grey !important",
+    },
+    buttonContainer: {
+        display: "flex",
+        justifyContent: "flex-end",
+        paddingTop: 10,
+    },
+}));
diff --git a/src/wizard/Stepper.tsx b/src/wizard/Stepper.tsx
new file mode 100644
index 0000000..5ae9ecd
--- /dev/null
+++ b/src/wizard/Stepper.tsx
@@ -0,0 +1,70 @@
+import { makeStyles, Step, StepButton, Stepper as MuiStepper } from "@material-ui/core";
+import _ from "lodash";
+import React, { MouseEvent } from "react";
+import { Help } from "./Help";
+import { WizardStep } from "./Wizard";
+
+export const Stepper: React.FC<StepperProps> = ({
+    steps,
+    lastClickableStepIndex = 0,
+    currentStepKey,
+    onStepClicked,
+}) => {
+    const classes = useStyles();
+
+    if (steps.length === 0) return null;
+
+    const index = _(steps).findIndex(step => step.key === currentStepKey);
+    const currentStepIndex = index >= 0 ? index : 0;
+    const currentStep = steps[currentStepIndex];
+
+    return (
+        <MuiStepper
+            nonLinear={true}
+            activeStep={currentStepIndex}
+            className={["Wizard-Stepper", classes.stepper].join(" ")}
+        >
+            {steps.map((step, index) => (
+                <Step
+                    key={step.key}
+                    completed={false}
+                    disabled={index > lastClickableStepIndex}
+                    className={"Wizard-Step"}
+                >
+                    <StepButton
+                        key={step.key}
+                        data-test-current={currentStep === step}
+                        onClick={onStepClicked ? onStepClicked(step.key) : undefined}
+                        classes={{ root: classes.stepButton }}
+                        className={currentStep === step ? "current-step" : ""}
+                    >
+                        {step.label}
+                    </StepButton>
+
+                    {step.help && <Help step={step} currentStepKey={currentStepKey} />}
+                </Step>
+            ))}
+        </MuiStepper>
+    );
+};
+
+type EventHandler = (event: MouseEvent<HTMLElement>) => void;
+
+export interface StepperProps {
+    steps: WizardStep[];
+    lastClickableStepIndex?: number;
+    currentStepKey?: string;
+    onStepClicked?: (stepKey: string) => EventHandler;
+}
+
+const useStyles = makeStyles(() => ({
+    stepButton: {
+        width: "auto",
+    },
+    stepper: {
+        marginLeft: 10,
+        marginRight: 10,
+    },
+}));
+
+export default Stepper;
diff --git a/src/wizard/Wizard.tsx b/src/wizard/Wizard.tsx
index 4c59201..84fa504 100644
--- a/src/wizard/Wizard.tsx
+++ b/src/wizard/Wizard.tsx
@@ -1,212 +1,105 @@
-import { createStyles, IconButton, makeStyles, Theme, Tooltip } from "@material-ui/core";
-import Button from "@material-ui/core/Button";
-import Icon from "@material-ui/core/Icon";
+import { makeStyles } from "@material-ui/core";
 import Paper from "@material-ui/core/Paper";
-import Step from "@material-ui/core/Step";
-import StepButton from "@material-ui/core/StepButton";
-import Stepper from "@material-ui/core/Stepper";
 import _ from "lodash";
-import memoize from "nano-memoize";
 import { ReactComponentLike } from "prop-types";
-import React, { useCallback, useEffect, useState } from "react";
-import { DialogButton } from "../dialog-button/DialogButton";
+import React, { ReactElement, useCallback, useEffect, useState } from "react";
 import { useSnackbar } from "../snackbar";
-import i18n from "../utils/i18n";
-
-const useStyles = makeStyles((theme: Theme) =>
-    createStyles({
-        root: {
-            width: "100%",
-        },
-        description: {
-            marginBottom: 15,
-            marginLeft: 3,
-            fontSize: "1.1em",
-        },
-        warning: {
-            marginBottom: 15,
-            marginLeft: 3,
-            fontSize: "1.1em",
-            color: "#F00",
-            textAlign: "center",
-            backgroundColor: "#EEE",
-            padding: 20,
-        },
-        button: {
-            margin: theme.spacing(1),
-            marginRight: 5,
-            padding: 10,
-        },
-        buttonDisabled: {
-            color: "grey !important",
-        },
-        buttonContainer: {
-            display: "flex",
-            justifyContent: "flex-end",
-            paddingTop: 10,
-        },
-        stepButton: {
-            width: "auto",
-        },
-        contents: {
-            margin: 10,
-            padding: 25,
-        },
-        messages: {
-            padding: 0,
-            listStyleType: "none",
-            color: "red",
-        },
-        stepper: {
-            marginLeft: 10,
-            marginRight: 10,
-        },
-    })
-);
-
-export interface WizardStep {
-    key: string;
-    label: string;
-    warning?: string;
-    description?: string;
-    component: ReactComponentLike;
-    props?: object;
-    help?: React.ReactNode;
-    helpDialogIsInitialOpen?: boolean;
-}
-
-export interface WizardProps {
-    initialStepKey: string;
-    onStepChangeRequest: (
-        currentStep: WizardStep,
-        newStep: WizardStep
-    ) => Promise<string[] | undefined>;
-    onStepChange?: (stepKey: string) => void;
-    useSnackFeedback?: boolean;
-    steps: WizardStep[];
-    lastClickableStepIndex?: number;
-}
+import { FeedbackMessages } from "./FeedbackMessages";
+import { Navigation, NavigationProps } from "./Navigation";
+import Stepper, { StepperProps } from "./Stepper";
+import { getAdjacentSteps } from "./utils";
 
 export const Wizard: React.FC<WizardProps> = ({
-    initialStepKey,
+    className,
+    steps,
+    stepKey,
+    initialStepKey = steps[0] ? steps[0].key : "",
     onStepChangeRequest,
-    onStepChange = _.noop,
+    onStepChange,
     useSnackFeedback = false,
-    steps,
     lastClickableStepIndex: initialLastClickableStepIndex = 0,
+    StepperComponent = Stepper,
+    NavigationComponent = Navigation,
 }) => {
     const classes = useStyles();
     const snackbar = useSnackbar();
 
-    const [currentStepKey, setCurrentStepKey] = useState(initialStepKey);
+    const [stateStepKey, setCurrentStepKey] = useState(initialStepKey);
+    const currentStepKey = stepKey || stateStepKey;
+
+    const [messages, setMessages] = useState<string[]>([]);
     const [lastClickableStepIndex, setLastClickableStepIndex] = useState(
         initialLastClickableStepIndex
     );
-    const [messages, setMessages] = useState([]);
-
-    const getAdjacentSteps = () => {
-        const index = _(steps).findIndex(step => step.key === currentStepKey);
-        const prevStepKey = index >= 1 ? steps[index - 1].key : null;
-        const nextStepKey = index >= 0 && index < steps.length - 1 ? steps[index + 1].key : null;
-        return { prevStepKey, nextStepKey };
-    };
-
-    const nextStep = () => {
-        const { nextStepKey } = getAdjacentSteps();
-        setStep(nextStepKey);
-    };
-
-    const prevStep = () => {
-        const { prevStepKey } = getAdjacentSteps();
-        setStep(prevStepKey);
-    };
-
-    const renderNavigationButton = ({ stepKey, onClick, label }) => {
-        return (
-            <Button
-                variant="contained"
-                classes={{ disabled: classes.buttonDisabled }}
-                disabled={!stepKey}
-                className={classes.button}
-                onClick={onClick}
-            >
-                {label}
-            </Button>
-        );
-    };
-
-    const renderHelp = ({ step, currentStepKey }) => {
-        return (
-            <DialogButton
-                buttonComponent={HelpButton}
-                title={`${step.label} - ${i18n.t("Help")}`}
-                contents={step.help}
-                initialIsOpen={step.helpDialogIsInitialOpen}
-                isVisible={step.help && step.key === currentStepKey}
-            />
-        );
-    };
-
-    const renderFeedbackMessages = () => {
-        if (useSnackFeedback || messages.length === 0) {
-            return null;
-        } else {
-            return (
-                <div className="messages">
-                    <ul className={classes.messages}>
-                        {messages.map((message, index) => (
-                            <li key={index}>{message}</li>
-                        ))}
-                    </ul>
-                </div>
-            );
-        }
-    };
 
     const notifyStepChange = useCallback(
         (skepKey: string) => {
-            onStepChange(skepKey);
+            if (onStepChange) onStepChange(skepKey);
         },
         [onStepChange]
     );
 
-    const setStep = async (newStepKey: string) => {
-        const stepsByKey = _.keyBy(steps, "key");
-        const newStep = stepsByKey[newStepKey];
-        const currentStep = stepsByKey[currentStepKey];
-        const currentStepIndex = _(steps).findIndex(step => step.key === currentStepKey);
-        const newStepIndex = _(steps).findIndex(step => step.key === newStepKey);
-        const shouldValidate = newStepIndex > currentStepIndex;
-        const errorMessages = shouldValidate ? await onStepChangeRequest(currentStep, newStep) : [];
-
-        if (_(errorMessages).isEmpty()) {
-            const newLastClickableStepIndex = Math.max(lastClickableStepIndex, newStepIndex);
-            notifyStepChange(newStepKey);
-            setCurrentStepKey(newStepKey);
-            setLastClickableStepIndex(newLastClickableStepIndex);
-            setMessages([]);
-        } else {
-            if (useSnackFeedback) {
-                snackbar.error(errorMessages.join("\n"), {
-                    autoHideDuration: null,
-                });
-            } else {
-                setMessages(errorMessages);
+    const setStep = useCallback(
+        async (newStepKey: string) => {
+            const stepsByKey = _.keyBy(steps, "key");
+            const newStep = stepsByKey[newStepKey];
+            const currentStep = stepsByKey[currentStepKey];
+            const currentStepIndex = _(steps).findIndex(step => step.key === currentStepKey);
+            const newStepIndex = _(steps).findIndex(step => step.key === newStepKey);
+            const shouldValidate = newStepIndex > currentStepIndex;
+            const errorMessages =
+                shouldValidate && onStepChangeRequest
+                    ? await onStepChangeRequest(currentStep, newStep)
+                    : [];
+
+            if (_(errorMessages).isEmpty()) {
+                const newLastClickableStepIndex = Math.max(lastClickableStepIndex, newStepIndex);
+                notifyStepChange(newStepKey);
+                setCurrentStepKey(newStepKey);
+                setLastClickableStepIndex(newLastClickableStepIndex);
+                setMessages([]);
+            } else if (errorMessages) {
+                if (useSnackFeedback) {
+                    snackbar.error(errorMessages.join("\n"), {
+                        autoHideDuration: null,
+                    });
+                } else {
+                    setMessages(errorMessages);
+                }
             }
-        }
-    };
+        },
+        [
+            currentStepKey,
+            lastClickableStepIndex,
+            notifyStepChange,
+            onStepChangeRequest,
+            snackbar,
+            steps,
+            useSnackFeedback,
+        ]
+    );
 
-    const onStepClicked = memoize((stepKey: string) => () => {
-        setStep(stepKey);
-    });
+    const onStepClicked = useCallback(
+        (stepKey: string) => () => {
+            setStep(stepKey);
+        },
+        [setStep]
+    );
 
+    const nextStep = useCallback(() => {
+        const { nextStepKey } = getAdjacentSteps(steps, currentStepKey);
+        if (nextStepKey) setStep(nextStepKey);
+    }, [currentStepKey, steps, setStep]);
+
+    const prevStep = useCallback(() => {
+        const { prevStepKey } = getAdjacentSteps(steps, currentStepKey);
+        if (prevStepKey) setStep(prevStepKey);
+    }, [currentStepKey, steps, setStep]);
+
+    const { prevStepKey, nextStepKey } = getAdjacentSteps(steps, currentStepKey);
     const index = _(steps).findIndex(step => step.key === currentStepKey);
     const currentStepIndex = index >= 0 ? index : 0;
     const currentStep = steps[currentStepIndex];
-    const { prevStepKey, nextStepKey } = getAdjacentSteps();
-    const NavigationButton = renderNavigationButton;
-    const Help = renderHelp;
-    const FeedbackMessages = renderFeedbackMessages;
     const { component: StepComponent, props: stepProps = {}, warning, description } = currentStep;
 
     useEffect(() => {
@@ -214,32 +107,15 @@ export const Wizard: React.FC<WizardProps> = ({
     }, [notifyStepChange, currentStepKey]);
 
     return (
-        <div className={classes.root}>
-            {steps.length > 1 && (
-                <Stepper nonLinear={true} activeStep={currentStepIndex} className={classes.stepper}>
-                    {steps.map((step, index) => (
-                        <Step
-                            key={step.key}
-                            completed={false}
-                            disabled={index > lastClickableStepIndex}
-                        >
-                            <StepButton
-                                key={step.key}
-                                data-test-current={currentStep === step}
-                                onClick={onStepClicked(step.key)}
-                                classes={{ root: classes.stepButton }}
-                                className={currentStep === step ? "current-step" : ""}
-                            >
-                                {step.label}
-                            </StepButton>
-
-                            {step.help && <Help step={step} currentStepKey={currentStepKey} />}
-                        </Step>
-                    ))}
-                </Stepper>
-            )}
+        <div className={[className, classes.root].join(" ")}>
+            <StepperComponent
+                steps={steps}
+                lastClickableStepIndex={lastClickableStepIndex}
+                currentStepKey={currentStepKey}
+                onStepClicked={onStepClicked}
+            />
 
-            <FeedbackMessages />
+            {useSnackFeedback && <FeedbackMessages messages={messages} />}
 
             <Paper className={classes.contents} data-wizard-contents={true}>
                 {warning && <div className={classes.warning}>{warning}</div>}
@@ -248,32 +124,70 @@ export const Wizard: React.FC<WizardProps> = ({
 
                 {<StepComponent {...stepProps} />}
 
-                {steps.length > 1 && (
-                    <div className={classes.buttonContainer}>
-                        <NavigationButton
-                            stepKey={prevStepKey}
-                            onClick={prevStep}
-                            label={"← " + i18n.t("Previous")}
-                        />
-
-                        <NavigationButton
-                            stepKey={nextStepKey}
-                            onClick={nextStep}
-                            label={i18n.t("Next") + " →"}
-                        />
-                    </div>
-                )}
+                <NavigationComponent
+                    steps={steps}
+                    currentStepKey={currentStepKey}
+                    disableNext={!nextStepKey}
+                    disablePrev={!prevStepKey}
+                    onNext={nextStep}
+                    onPrev={prevStep}
+                />
             </Paper>
         </div>
     );
 };
 
-const HelpButton = ({ onClick }) => (
-    <Tooltip title={i18n.t("Help")}>
-        <IconButton onClick={onClick}>
-            <Icon color="primary">help</Icon>
-        </IconButton>
-    </Tooltip>
-);
+const useStyles = makeStyles(() => ({
+    root: {
+        width: "100%",
+    },
+    description: {
+        marginBottom: 15,
+        marginLeft: 3,
+        fontSize: "1.1em",
+    },
+    warning: {
+        marginBottom: 15,
+        marginLeft: 3,
+        fontSize: "1.1em",
+        color: "#F00",
+        textAlign: "center",
+        backgroundColor: "#EEE",
+        padding: 20,
+    },
+    contents: {
+        margin: 10,
+        padding: 25,
+    },
+}));
+
+export interface WizardStep {
+    key: string;
+    label: string;
+    warning?: string;
+    description?: string;
+    component: ReactComponentLike;
+    props?: object;
+    help?: React.ReactNode;
+    helpDialogIsInitialOpen?: boolean;
+}
+
+export interface WizardProps {
+    className?: string;
+    stepKey?: string;
+    initialStepKey?: string;
+    useSnackFeedback?: boolean;
+    lastClickableStepIndex?: number;
+    steps: WizardStep[];
+    NavigationComponent?: (props: NavigationProps) => ReactElement | null;
+    StepperComponent?: (props: StepperProps) => ReactElement | null;
+    onStepChangeRequest?: (
+        currentStep: WizardStep,
+        newStep: WizardStep
+    ) => Promise<string[] | undefined>;
+    onStepChange?: (stepKey: string) => void;
+}
+
+export { NavigationProps as WizardNavigationProps, StepperProps as WizardStepperProps };
 
 export default Wizard;
diff --git a/src/wizard/utils.ts b/src/wizard/utils.ts
new file mode 100644
index 0000000..7109694
--- /dev/null
+++ b/src/wizard/utils.ts
@@ -0,0 +1,9 @@
+import _ from "lodash";
+import { WizardStep } from "./Wizard";
+
+export const getAdjacentSteps = (steps: WizardStep[], currentStepKey: string) => {
+    const index = _(steps).findIndex(step => step.key === currentStepKey);
+    const prevStepKey = index >= 1 ? steps[index - 1].key : null;
+    const nextStepKey = index >= 0 && index < steps.length - 1 ? steps[index + 1].key : null;
+    return { prevStepKey, nextStepKey };
+};
diff --git a/tsconfig.json b/tsconfig.json
index b0699c2..f40a89c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,12 +1,27 @@
 {
     "compilerOptions": {
+        "target": "es2015",
+        "allowJs": true,
+        "skipLibCheck": true,
+        "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "resolveJsonModule": true,
         "declaration": true,
-        "esModuleInterop": true,
-        "isolatedModules": false,
-        "skipLibCheck" : true,
-        "jsx": "react"
+        "jsx": "react",
+        "noUnusedParameters": true,
+        "noUnusedLocals": true,
+        "experimentalDecorators": true,
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ]
     },
-    "include": ["src"],
-    "exclude": ["**/*.spec.{js,jsx,ts,tsx}"]
+    "include": [
+        "src"
+    ]
 }
diff --git a/yarn.lock b/yarn.lock
index 84e97ac..4b2b95a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6537,10 +6537,10 @@ type-fest@^0.8.1:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
   integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
-typescript@^3.6.3:
-  version "3.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.3.tgz#409eb8544ea0335711205869ec458ab109ee1061"
-  integrity sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==
+typescript@4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
+  integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==
 
 ua-parser-js@^0.7.18:
   version "0.7.21"