Repository: react-materialize/react-materialize
Pull request #1090 (2020-04-03 17:07:07)

More type definitions
Fixes https://github.com/react-materialize/react-materialize/issues/1040
Fixes https://github.com/react-materialize/react-materialize/issues/1059
Fixes https://github.com/react-materialize/react-materialize/issues/1039
Fixes https://github.com/react-materialize/react-materialize/issues/1038
Fixes https://github.com/react-materialize/react-materialize/issues/1037
Fixes https://github.com/react-materialize/react-materialize/issues/1036
Fixes https://github.com/react-materialize/react-materialize/issues/1034
Fixes https://github.com/react-materialize/react-materialize/issues/1033
Fixes https://github.com/react-materialize/react-materialize/issues/1032
Fixes https://github.com/react-materialize/react-materialize/issues/1031
Fixes https://github.com/react-materialize/react-materialize/issues/1030
Fixes https://github.com/react-materialize/react-materialize/issues/1029
Fixes https://github.com/react-materialize/react-materialize/issues/1028
Fixes https://github.com/react-materialize/react-materialize/issues/1027
Fixes https://github.com/react-materialize/react-materialize/issues/1026
Fixes https://github.com/react-materialize/react-materialize/issues/1025
Fixes https://github.com/react-materialize/react-materialize/issues/1024



Patch:
diff --git a/src/Select.js b/src/Select.js
index 697afa8..ba11c6f 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -193,7 +193,6 @@ Select.propTypes = {
       alignment: PropTypes.oneOf(['left', 'right']),
       autoTrigger: PropTypes.bool,
       constrainWidth: PropTypes.bool,
-      container: PropTypes.node,
       coverTrigger: PropTypes.bool,
       closeOnClick: PropTypes.bool,
       hover: PropTypes.bool,
@@ -216,7 +215,6 @@ Select.defaultProps = {
       alignment: 'left',
       autoTrigger: true,
       constrainWidth: true,
-      container: null,
       coverTrigger: true,
       closeOnClick: true,
       hover: false,
diff --git a/src/SideNav.js b/src/SideNav.js
index a8427dc..53868ea 100644
--- a/src/SideNav.js
+++ b/src/SideNav.js
@@ -79,7 +79,14 @@ SideNav.propTypes = {
    */
   options: PropTypes.shape({
     edge: PropTypes.oneOf(['left', 'right']),
-    draggable: PropTypes.bool
+    draggable: PropTypes.bool,
+    inDuration: PropTypes.number,
+    outDuration: PropTypes.number,
+    onOpenStart: PropTypes.func,
+    onOpenEnd: PropTypes.func,
+    onCloseStart: PropTypes.func,
+    onCloseEnd: PropTypes.func,
+    preventScrolling: PropTypes.bool
   }),
   /**
    * Additional classes added to 'sidenav'
diff --git a/src/SideNavItem.js b/src/SideNavItem.js
index 693132c..e5a5831 100644
--- a/src/SideNavItem.js
+++ b/src/SideNavItem.js
@@ -26,7 +26,7 @@ const SideNavItem = ({
       {userView && user && <UserView {...user} />}
       {!userView && (
         <a className={cx(linkClasses)} href={href}>
-          {icon && <i className="material-icons">{icon}</i>}
+          {icon && React.cloneElement(icon, { className: 'prefix' })}
           {children}
         </a>
       )}
diff --git a/stories/SideNav.stories.js b/stories/SideNav.stories.js
index b8a8a9c..445f414 100644
--- a/stories/SideNav.stories.js
+++ b/stories/SideNav.stories.js
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
 import SideNav from '../src/SideNav';
 import SideNavItem from '../src/SideNavItem';
 import Button from '../src/Button';
+import Icon from '../src/Icon';
 
 const stories = storiesOf('Javascript|SideNav', module);
 const reactMaterializeLogo = require('./react-materialize-logo.svg');
@@ -24,7 +25,7 @@ stories.add('Default', () => (
     </style>
     <SideNav
       trigger={<Button>SIDE NAV DEMO</Button>}
-      options={{ closeOnClick: true }}
+      options={{ draggable: true }}
     >
       <SideNavItem
         userView
@@ -35,7 +36,7 @@ stories.add('Default', () => (
           email: 'jdandturk@gmail.com'
         }}
       />
-      <SideNavItem href="#!icon" icon="cloud">
+      <SideNavItem href="#!icon" icon={<Icon>cloud</Icon>}>
         First Link With Icon
       </SideNavItem>
       <SideNavItem href="#!second">Second Link</SideNavItem>
diff --git a/types/components/Caption.ts b/types/components/Caption.ts
index 7dad6e9..088d11b 100644
--- a/types/components/Caption.ts
+++ b/types/components/Caption.ts
@@ -1,8 +1,15 @@
 import * as React from 'react';
+import { SharedBasic } from './utils';
 
-declare namespace Caption {
-}
+export type CaptionPlacement = 'left' | 'center' | 'right';
 
-declare class Caption extends React.Component {}
+export interface CaptionProps extends SharedBasic {
+  placement?: CaptionPlacement;
+};
 
-export = Caption;
+/**
+ * React Materialize: Caption
+ */
+declare const Caption: React.FC<CaptionProps>
+
+export default Caption;
diff --git a/types/components/NavItem.ts b/types/components/NavItem.ts
index 3c6bcd4..c42b538 100644
--- a/types/components/NavItem.ts
+++ b/types/components/NavItem.ts
@@ -1,8 +1,17 @@
 import * as React from 'react';
+import { AnyFn } from './utils';
 
-declare namespace Checkbox {
-}
+export interface NavItemProps {
+  divider?: boolean;
+  href?: string;
+  onClick?: AnyFn;
+  className?: string;
+  children?: string;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: NavItem
+ */
+declare const NavItem: React.FC<NavItemProps>
 
-export = Checkbox;
+export default NavItem;
diff --git a/types/components/Navbar.ts b/types/components/Navbar.ts
index 3c6bcd4..c14109d 100644
--- a/types/components/Navbar.ts
+++ b/types/components/Navbar.ts
@@ -1,8 +1,37 @@
 import * as React from 'react';
+import { SharedBasic, AnyFn } from './utils';
 
-declare namespace Checkbox {
+export type NavbarAlignment = 'left' | 'right';
+
+export interface NavbarOptions {
+  edge?: NavbarAlignment;
+  draggable?: boolean;
+  inDuration?: number;
+  outDuration?: number;
+  onOpenStart?: AnyFn;
+  onOpenEnd?: AnyFn;
+  onCloseStart?: AnyFn;
+  onCloseEnd?: AnyFn;
+  preventScrolling?: boolean;
 }
 
-declare class Checkbox extends React.Component {}
+export interface NavbarProps extends SharedBasic {
+  menuIcon: React.ReactElement;
+  id?: string;
+  brand?: React.ReactElement;
+  extendWith?: React.ReactElement;
+  search?: boolean;
+  sidenav?: React.ReactElement;
+  alignLinks?: NavbarAlignment;
+  centerLogo?: boolean;
+  centerChildren?: boolean;
+  fixed?: boolean;
+  options?: NavbarOptions;
+};
+
+/**
+ * React Materialize: Navbar
+ */
+declare const Navbar: React.FC<NavbarProps>
 
-export = Checkbox;
+export default Navbar;
diff --git a/types/components/Pagination.ts b/types/components/Pagination.ts
index 3c6bcd4..6846cf5 100644
--- a/types/components/Pagination.ts
+++ b/types/components/Pagination.ts
@@ -1,8 +1,15 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface PaginationProps {
+  activePage?: number;
+  items?: number;
+  leftBtn?: React.ReactElement;
+  rightBtn?: React.ReactElement;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: Pagination
+ */
+declare const Pagination: React.FC<PaginationProps>
 
-export = Checkbox;
+export default Pagination;
diff --git a/types/components/PaginationButton.ts b/types/components/PaginationButton.ts
index 3c6bcd4..70e390c 100644
--- a/types/components/PaginationButton.ts
+++ b/types/components/PaginationButton.ts
@@ -1,8 +1,17 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface PaginationButtonProps {
+  active?: boolean;
+  children?: string,
+  className?: string,
+  disabled?: boolean;
+  href?: string,
+  onSelect?: (event: React.MouseEvent<HTMLLIElement>) => any;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: PaginationButton
+ */
+declare const PaginationButton: React.FC<PaginationButtonProps>
 
-export = Checkbox;
+export default PaginationButton;
diff --git a/types/components/Parallax.ts b/types/components/Parallax.ts
index 3c6bcd4..a51ece4 100644
--- a/types/components/Parallax.ts
+++ b/types/components/Parallax.ts
@@ -1,8 +1,18 @@
 import * as React from 'react';
+import { SharedBasic } from './utils';
 
-declare namespace Checkbox {
+export interface ParallaxOptions {
+  responsiveThreshold?: number;
 }
 
-declare class Checkbox extends React.Component {}
+export interface ParallaxProps extends SharedBasic {
+  options?: ParallaxOptions;
+  image?: React.ReactElement;
+};
 
-export = Checkbox;
+/**
+ * React Materialize: Parallax
+ */
+declare const Parallax: React.FC<ParallaxProps>
+
+export default Parallax;
diff --git a/types/components/Preloader.ts b/types/components/Preloader.ts
index 3c6bcd4..860fec4 100644
--- a/types/components/Preloader.ts
+++ b/types/components/Preloader.ts
@@ -1,8 +1,19 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export type PreloaderSize = 'big' | 'small' | 'medium';
+export type PreloaderColor = 'blue' | 'red' | 'yellow' | 'green';
 
-declare class Checkbox extends React.Component {}
+export interface PreloaderProps {
+  className?: string;
+  active?: boolean;
+  size?: PreloaderSize;
+  color?: PreloaderColor;
+  flashing?: boolean;
+};
 
-export = Checkbox;
+/**
+ * React Materialize: Preloader
+ */
+declare const Preloader: React.FC<PreloaderProps>
+
+export default Preloader;
diff --git a/types/components/ProgressBar.ts b/types/components/ProgressBar.ts
index 3c6bcd4..fbf0917 100644
--- a/types/components/ProgressBar.ts
+++ b/types/components/ProgressBar.ts
@@ -1,8 +1,13 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface ProgressBarProps {
+  className?: string;
+  progress?: number;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: ProgressBar
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>
 
-export = Checkbox;
+export default ProgressBar;
diff --git a/types/components/RadioGroup.ts b/types/components/RadioGroup.ts
index 3c6bcd4..81e6e0d 100644
--- a/types/components/RadioGroup.ts
+++ b/types/components/RadioGroup.ts
@@ -1,8 +1,19 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface RadioGroupProps {
+  label?: string;
+  name?: string;
+  options: { label: string; value: string }[];
+  value?: string;
+  withGap?: boolean;
+  onChange?: (event: React.MouseEvent<HTMLInputElement>) => any;
+  disabled?: boolean;
+  radioClassNames?: string;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: RadioGroup
+ */
+declare const RadioGroup: React.FC<RadioGroupProps>
 
-export = Checkbox;
+export default RadioGroup;
diff --git a/types/components/Range.ts b/types/components/Range.ts
index 3c6bcd4..23fb7ff 100644
--- a/types/components/Range.ts
+++ b/types/components/Range.ts
@@ -1,8 +1,13 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface RangeProps {
+  min: string;
+  max: string;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: Range
+ */
+declare const Range: React.FC<RangeProps>
 
-export = Checkbox;
+export default Range;
diff --git a/types/components/Row.ts b/types/components/Row.ts
index 3c6bcd4..7dda192 100644
--- a/types/components/Row.ts
+++ b/types/components/Row.ts
@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { SharedBasic } from './utils';
 
-declare namespace Checkbox {
-}
+export interface RowProps extends SharedBasic {
+  node?: React.ReactElement | React.ReactNode;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: Row
+ */
+declare const Row: React.FC<RowProps>
 
-export = Checkbox;
+export default Row;
diff --git a/types/components/SearchForm.ts b/types/components/SearchForm.ts
index 3c6bcd4..87d68c9 100644
--- a/types/components/SearchForm.ts
+++ b/types/components/SearchForm.ts
@@ -1,8 +1,13 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface SearchFormProps {
+  searchIcon: React.ReactElement;
+  closeIcon: React.ReactElement;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: SearchForm
+ */
+declare const SearchForm: React.FC<SearchFormProps>
 
-export = Checkbox;
+export default SearchForm;
diff --git a/types/components/Select.ts b/types/components/Select.ts
index 3c6bcd4..8aba4b1 100644
--- a/types/components/Select.ts
+++ b/types/components/Select.ts
@@ -1,8 +1,25 @@
 import * as React from 'react';
+import { SharedBasic, Responsive } from './utils';
+import { DropdownOptions } from './Dropdown';
 
-declare namespace Checkbox {
+export type SelectDropdownAlignment = 'left' | 'right';
+
+interface SelectOptions {
+  classes?: string;
+  dropdownOptions?: DropdownOptions;
 }
 
-declare class Checkbox extends React.Component {}
+export interface SelectProps extends Responsive, SharedBasic {
+  id?: string;
+  label?: string;
+  multiple?: boolean;
+  options?: SelectOptions;
+  value?: string;
+};
+
+/**
+ * React Materialize: Select
+ */
+declare const Select: React.FC<SelectProps>
 
-export = Checkbox;
+export default Select;
diff --git a/types/components/SideNav.ts b/types/components/SideNav.ts
index 3c6bcd4..257ffc8 100644
--- a/types/components/SideNav.ts
+++ b/types/components/SideNav.ts
@@ -1,8 +1,30 @@
 import * as React from 'react';
+import { SharedBasic, AnyFn } from './utils';
 
-declare namespace Checkbox {
+export type SideNavEdge = 'left' | 'right';
+
+export interface SideNavOptions {
+  edge?: SideNavEdge;
+  draggable?: boolean;
+  inDuration?: number;
+  outDuration?: number;
+  onOpenStart?: AnyFn;
+  onOpenEnd?: AnyFn;
+  onCloseStart?: AnyFn;
+  onCloseEnd?: AnyFn;
+  preventScrolling?: boolean;
 }
 
-declare class Checkbox extends React.Component {}
+export interface SideNavProps extends SharedBasic {
+  id?: string;
+  options?: SideNavOptions;
+  trigger?: React.ReactElement;
+  fixed?: boolean;
+};
+
+/**
+ * React Materialize: SideNav
+ */
+declare const SideNav: React.FC<SideNavProps>
 
-export = Checkbox;
+export default SideNav;
diff --git a/types/components/SideNavItem.ts b/types/components/SideNavItem.ts
index 3c6bcd4..446b945 100644
--- a/types/components/SideNavItem.ts
+++ b/types/components/SideNavItem.ts
@@ -1,8 +1,19 @@
 import * as React from 'react';
 
-declare namespace Checkbox {
-}
+export interface SideNavItemProps {
+  href?: string;
+  waves?: boolean;
+  children?: string;
+  divider?: boolean;
+  subheader?: boolean;
+  userView?: boolean;
+  icon?: React.ReactNode;
+  user?: any; // TODO use UserShape
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: SideNavItem
+ */
+declare const SideNavItem: React.FC<SideNavItemProps>
 
-export = Checkbox;
+export default SideNavItem;
diff --git a/types/components/Slide.ts b/types/components/Slide.ts
index 3c6bcd4..e2ee8c3 100644
--- a/types/components/Slide.ts
+++ b/types/components/Slide.ts
@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { SharedBasic } from './utils';
 
-declare namespace Checkbox {
-}
+export interface SlideProps extends SharedBasic {
+  image: React.ReactNode;
+};
 
-declare class Checkbox extends React.Component {}
+/**
+ * React Materialize: Slide
+ */
+declare const Slide: React.FC<SlideProps>
 
-export = Checkbox;
+export default Slide;
diff --git a/types/components/Slider.ts b/types/components/Slider.ts
index 3c6bcd4..000a801 100644
--- a/types/components/Slider.ts
+++ b/types/components/Slider.ts
@@ -1,8 +1,21 @@
 import * as React from 'react';
+import { SharedBasic } from './utils';
 
-declare namespace Checkbox {
+export interface SliderOptions {
+  indicators?: boolean;
+  interval?: number;
+  duration?: number;
+  height?: number;
 }
 
-declare class Checkbox extends React.Component {}
+export interface SliderProps extends SharedBasic {
+  fullscreen?: boolean;
+  options?: SliderOptions;
+};
 
-export = Checkbox;
+/**
+ * React Materialize: Slider
+ */
+declare const Slider: React.FC<SliderProps>
+
+export default Slider;
diff --git a/types/components/utils.d.ts b/types/components/utils.d.ts
index b7a8b44..deeb1e7 100644
--- a/types/components/utils.d.ts
+++ b/types/components/utils.d.ts
@@ -10,5 +10,5 @@ export type AnyFn = (...args: any[]) => any;
 
 export interface SharedBasic {
   className?: string;
-  children?: React.ReactElement;
+  children?: React.ReactElement | React.ReactElement[];
 }


Test patch:
diff --git a/test/Select.spec.js b/test/Select.spec.js
index 256d591..4fe6e0b 100644
--- a/test/Select.spec.js
+++ b/test/Select.spec.js
@@ -128,7 +128,6 @@ describe('<Select />', () => {
           alignment: 'left',
           autoTrigger: true,
           constrainWidth: true,
-          container: null,
           coverTrigger: true,
           closeOnClick: true,
           hover: false,
diff --git a/test/SideNav.spec.js b/test/SideNav.spec.js
index dadb8b5..af4dc70 100644
--- a/test/SideNav.spec.js
+++ b/test/SideNav.spec.js
@@ -54,7 +54,7 @@ describe('<SideNav />', () => {
 
   test('should call sideNav with the given options', () => {
     const options = {
-      closeOnClick: true,
+      draggable: true,
       edge: 'right'
     };
     mount(<SideNav trigger={trigger} options={options} />);
diff --git a/test/__snapshots__/SideNavItem.spec.js.snap b/test/__snapshots__/SideNavItem.spec.js.snap
index d7369d1..0529a2e 100644
--- a/test/__snapshots__/SideNavItem.spec.js.snap
+++ b/test/__snapshots__/SideNavItem.spec.js.snap
@@ -23,10 +23,8 @@ exports[`<SideNavItem /> should render an icon when needed 1`] = `
   className=""
   href="#!"
 >
-  <i
-    className="material-icons"
-  >
-    car
-  </i>
+  <Component
+    className="prefix"
+  />
 </a>
 `;
diff --git a/types/sample.test.tsx b/types/sample.test.tsx
index abaf905..b8d5ebe 100644
--- a/types/sample.test.tsx
+++ b/types/sample.test.tsx
@@ -18,6 +18,22 @@ import {
   Icon,
   MediaBox,
   Modal,
+  Navbar,
+  NavItem,
+  Pagination,
+  Parallax,
+  Preloader,
+  ProgressBar,
+  RadioGroup,
+  Range,
+  Row,
+  SearchForm,
+  Select,
+  SideNav,
+  SideNavItem,
+  Slider,
+  Slide,
+  Caption,
 } from 'react-materialize';
 
 <>
@@ -87,4 +103,187 @@ import {
   >
     <p>Lorem ipsum dolor sit amet</p>
   </Modal>
+  <Navbar
+    alignLinks="right"
+    brand={<a className="brand-logo" href="#">Logo</a>}
+    id="mobile-nav"
+    menuIcon={<Icon>menu</Icon>}
+    options={{
+      draggable: true,
+      edge: 'left',
+      inDuration: 250,
+      onCloseEnd: () => {},
+      outDuration: 200,
+      preventScrolling: true
+    }}
+  >
+    <NavItem href="">
+      Getting started
+    </NavItem>
+    <NavItem href="components.html">
+      Components
+    </NavItem>
+  </Navbar>
+  <Pagination
+    activePage={3}
+    items={5}
+    leftBtn={<Icon>chevron_left</Icon>}
+    rightBtn={<Icon>chevron_right</Icon>}
+  />
+  <Parallax
+    image={<img alt="" src="http://materializecss.com/images/parallax1.jpg"/>}
+    options={{
+      responsiveThreshold: 0
+    }} />
+  <Preloader
+    active
+    color="blue"
+    flashing={false}
+    size="big"
+  />
+  <ProgressBar
+    progress={50}
+  />
+  <RadioGroup
+    label="T-Shirt Size"
+    name="size"
+    options={[
+      {
+        label: 'XL',
+        value: 'xl'
+      },
+      {
+        label: 'L',
+        value: 'l'
+      },
+      {
+        label: 'M',
+        value: 'm'
+      }
+    ]}
+    value="xl"
+  />
+  <Range min="0" max="50"/>
+  <Row node="p" className="asd" />
+  <SearchForm searchIcon={<p>asd</p>} closeIcon={<i>asd</i>} />
+  <Select
+    id="Select-9"
+    label="Choose your option"
+    multiple={false}
+    options={{
+      classes: '',
+      dropdownOptions: {
+        alignment: 'left',
+        autoTrigger: true,
+        closeOnClick: true,
+        constrainWidth: true,
+        coverTrigger: true,
+        hover: false,
+        inDuration: 150,
+        onCloseEnd: () => {},
+        onCloseStart: () => {},
+        onOpenEnd: () => {},
+        onOpenStart: () => {},
+        outDuration: 250
+      }
+    }}
+    value="2"
+  >
+    <option value="1">
+      Option 1
+    </option>
+    <option value="2">
+      Option 2
+    </option>
+    <option value="3">
+      Option 3
+    </option>
+  </Select>
+  <SideNav
+    id="SideNav-10"
+    options={{
+      draggable: true
+    }}
+    trigger={<Button>SIDE NAV DEMO</Button>}
+  >
+    <SideNavItem
+      user={{
+        background: 'https://placeimg.com/640/480/tech',
+        email: 'jdandturk@gmail.com',
+        image: 'static/media/react-materialize-logo.824c6ea3.svg',
+        name: 'John Doe'
+      }}
+      userView
+    />
+    <SideNavItem
+      href="#!icon"
+      icon="cloud"
+    >
+      First Link With Icon
+    </SideNavItem>
+    <SideNavItem href="#!second">
+      Second Link
+    </SideNavItem>
+    <SideNavItem divider />
+    <SideNavItem subheader>
+      Subheader
+    </SideNavItem>
+    <SideNavItem
+      icon={<Icon>foo</Icon>}
+      href="#!third"
+      waves
+    >
+      Third Link With Waves
+    </SideNavItem>
+  </SideNav>
+  <Slider
+    fullscreen={false}
+    options={{
+      duration: 500,
+      height: 400,
+      indicators: true,
+      interval: 6000
+    }}
+  >
+    <Slide image={<img alt="" src="http://lorempixel.com/780/580/nature/1"/>}>
+      <Caption placement="center">
+        <h3>
+          This is our big Tagline!
+        </h3>
+        <h5 className="light grey-text text-lighten-3">
+          Here's our small slogan.
+        </h5>
+      </Caption>
+    </Slide>
+    <Slide image={<img alt="" src="http://lorempixel.com/780/580/nature/2"/>}>
+      <Caption placement="left">
+        <h3>
+          Left Aligned Caption
+        </h3>
+        <h5 className="light grey-text text-lighten-3">
+          Here's our small slogan.
+        </h5>
+      </Caption>
+    </Slide>
+    <Slide image={<img alt="" src="https://lorempixel.com/780/580/nature/3"/>}>
+      <Caption placement="right">
+        <h3>
+          Right Aligned Caption
+        </h3>
+        <h5 className="light grey-text text-lighten-3">
+          Here's our small slogan.
+        </h5>
+      </Caption>
+    </Slide>
+    <Slide image={<img alt="" src="https://lorempixel.com/580/250/nature/4"/>}>
+      <Caption placement="center">
+        <h3>
+          This is our big Tagline!
+        </h3>
+        <h5 className="light grey-text text-lighten-3">
+          Here's our small slogan.
+        </h5>
+      </Caption>
+    </Slide>
+  </Slider>
 </>