diff --git a/packages/clay-modal/src/Modal.tsx b/packages/clay-modal/src/Modal.tsx
index e27adb3930..8c9128e5e3 100644
--- a/packages/clay-modal/src/Modal.tsx
+++ b/packages/clay-modal/src/Modal.tsx
@@ -9,27 +9,25 @@ import classNames from 'classnames';
 import Context, {IContext} from './Context';
 import Footer from './Footer';
 import Header from './Header';
-import React, {FunctionComponent, useEffect, useRef, useState} from 'react';
+import React, {FunctionComponent, useEffect, useRef} from 'react';
 import {ClayPortal} from '@clayui/shared';
-import {Size} from './types';
+import {Observer, ObserverType, Size} from './types';
 import {useUserInteractions} from './Hook';
 
-interface IProps extends React.HTMLAttributes<HTMLDivElement>, IContext {
-	children?: (onClose: () => void) => React.ReactNode;
-
+interface IProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		Omit<IContext, 'onClose'> {
 	/**
 	 * The size of element modal.
 	 */
 	size?: Size;
-}
-
-const delay = (fn: Function) => {
-	return setTimeout(() => {
-		fn();
-	}, 100);
-};
 
-const modalOpenClassName = 'modal-open';
+	/**
+	 * Observer is Modal's communication system with `useModal`
+	 * hook, adds observer from `useModal` hook here.
+	 */
+	observer: Observer;
+}
 
 const ClayModal: FunctionComponent<IProps> & {
 	Body: typeof Body;
@@ -38,58 +36,32 @@ const ClayModal: FunctionComponent<IProps> & {
 } = ({
 	children,
 	className,
-	onClose = () => {},
+	observer,
 	size,
 	spritemap,
 	status,
 	...otherProps
 }: IProps) => {
-	const [visibleClassShow, setVisibleClassShow] = useState<boolean>(false);
-
 	const modalBodyElementRef = useRef<HTMLDivElement | null>(null);
 	const modalDialogElementRef = useRef<HTMLDivElement | null>(null);
 
-	/**
-	 * Control the close of the modal to create the component's "unmount"
-	 * animation and call the onClose prop with delay.
-	 */
-	const handleCloseModal = () => {
-		document.body.classList.remove(modalOpenClassName);
-		setVisibleClassShow(false);
-
-		delay(onClose);
-	};
-
-	const context = {
-		onClose: handleCloseModal,
-		spritemap,
-		status,
-	};
-
-	useUserInteractions(modalDialogElementRef, handleCloseModal);
-
-	useEffect(() => {
-		document.body.classList.add(modalOpenClassName);
-		const timer = delay(() => {
-			setVisibleClassShow(true);
-		});
+	useUserInteractions(modalDialogElementRef, () =>
+		observer.dispatch(ObserverType.Close)
+	);
 
-		return () => {
-			clearTimeout(timer);
-		};
-	}, []);
+	useEffect(() => observer.dispatch(ObserverType.Open), []);
 
 	return (
 		<ClayPortal subPortalRef={modalBodyElementRef}>
 			<div
 				className={classNames('modal-backdrop fade', {
-					show: visibleClassShow,
+					show: observer.mutation,
 				})}
 			/>
 			<div
 				{...otherProps}
 				className={classNames('fade modal d-block', className, {
-					show: visibleClassShow,
+					show: observer.mutation,
 				})}
 				ref={modalBodyElementRef}
 			>
@@ -102,10 +74,15 @@ const ClayModal: FunctionComponent<IProps> & {
 					tabIndex={-1}
 				>
 					<div className="modal-content">
-						<Context.Provider value={context}>
-							{children && typeof children === 'function'
-								? children(handleCloseModal)
-								: children}
+						<Context.Provider
+							value={{
+								onClose: () =>
+									observer.dispatch(ObserverType.Close),
+								spritemap,
+								status,
+							}}
+						>
+							{children}
 						</Context.Provider>
 					</div>
 				</div>
diff --git a/packages/clay-modal/src/__tests__/IncrementalInteractions.tsx b/packages/clay-modal/src/__tests__/IncrementalInteractions.tsx
index 075837ccfe..0d938a0762 100644
--- a/packages/clay-modal/src/__tests__/IncrementalInteractions.tsx
+++ b/packages/clay-modal/src/__tests__/IncrementalInteractions.tsx
@@ -6,8 +6,8 @@
  */
 
 import Button from '@clayui/button';
-import ClayModal from '..';
-import React, {useState} from 'react';
+import ClayModal, {ClayModalProvider, Context, useModal} from '..';
+import React, {useContext, useEffect, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {cleanup, fireEvent, render} from '@testing-library/react';
 
@@ -24,15 +24,12 @@ const ModalWithState: React.FunctionComponent<IProps> = ({
 	...props
 }) => {
 	const [visible, setVisible] = useState(initialVisible);
+	const {observer} = useModal({onClose: () => setVisible(false)});
 
 	return (
 		<>
 			{visible && (
-				<ClayModal
-					onClose={() => setVisible(false)}
-					spritemap={spritemap}
-					{...props}
-				>
+				<ClayModal observer={observer} spritemap={spritemap} {...props}>
 					{children}
 				</ClayModal>
 			)}
@@ -160,9 +157,18 @@ describe('Modal -> IncrementalInteractions', () => {
 	});
 
 	it('close the modal when click on the button of Footer component', () => {
-		const {getByLabelText} = render(
-			<ModalWithState initialVisible>
-				{(onClose: any) => (
+		const ModalState = () => {
+			const [visible, setVisible] = useState(true);
+			const {observer, onClose} = useModal({
+				onClose: () => setVisible(false),
+			});
+
+			if (!visible) {
+				return null;
+			}
+
+			return (
+				<ClayModal observer={observer} spritemap={spritemap}>
 					<ClayModal.Footer
 						last={
 							<Button aria-label="buttonFooter" onClick={onClose}>
@@ -170,9 +176,10 @@ describe('Modal -> IncrementalInteractions', () => {
 							</Button>
 						}
 					/>
-				)}
-			</ModalWithState>
-		);
+				</ClayModal>
+			);
+		};
+		const {getByLabelText} = render(<ModalState />);
 
 		jest.runAllTimers();
 
diff --git a/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap
index 83592d4c93..324aa51bc1 100644
--- a/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-modal/src/__tests__/__snapshots__/index.tsx.snap
@@ -1,244 +1,270 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ClayModal renders 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
     <div
-      className="modal-dialog"
-      tabIndex={-1}
+      class="modal-backdrop fade"
+    />
+    <div
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
+        class="modal-dialog"
+        tabindex="-1"
       >
         <div
-          className="modal-header"
+          class="modal-content"
         >
           <div
-            className="modal-title"
-          >
-            Foo
-          </div>
-          <button
-            aria-label="close"
-            className="close btn btn-unstyled"
-            onClick={[Function]}
-            type="button"
+            class="modal-header"
           >
-            <svg
-              className="lexicon-icon lexicon-icon-times"
-              role="presentation"
+            <div
+              class="modal-title"
             >
-              <use
-                xlinkHref="icons.svg#times"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          className="modal-body"
-        >
-          <h1>
-            Hello world!
-          </h1>
-        </div>
-        <div
-          className="modal-footer"
-        >
-          <div
-            className="modal-item-first"
-          />
-          <div
-            className="modal-item"
-          />
-          <div
-            className="modal-item-last"
-          >
+              Foo
+            </div>
             <button
-              className="btn btn-primary"
-              onClick={[Function]}
+              aria-label="close"
+              class="close btn btn-unstyled"
               type="button"
             >
-              Primary
+              <svg
+                class="lexicon-icon lexicon-icon-times"
+                role="presentation"
+              >
+                <use
+                  xlink:href="icons.svg#times"
+                />
+              </svg>
             </button>
           </div>
+          <div
+            class="modal-body"
+          >
+            <h1>
+              Hello world!
+            </h1>
+          </div>
+          <div
+            class="modal-footer"
+          >
+            <div
+              class="modal-item-first"
+            />
+            <div
+              class="modal-item"
+            />
+            <div
+              class="modal-item-last"
+            >
+              <button
+                class="btn btn-primary"
+                type="button"
+              >
+                Primary
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
 
 exports[`ClayModal renders a body component with url 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
     <div
-      className="modal-dialog"
-      tabIndex={-1}
+      class="modal-backdrop fade"
+    />
+    <div
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
+        class="modal-dialog"
+        tabindex="-1"
       >
         <div
-          className="modal-body modal-body-iframe"
+          class="modal-content"
         >
-          <iframe
-            src="http://localhost"
-            title="http://localhost"
-          />
+          <div
+            class="modal-body modal-body-iframe"
+          >
+            <iframe
+              src="http://localhost"
+              title="http://localhost"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
 
 exports[`ClayModal renders a footer component with buttons 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
     <div
-      className="modal-dialog"
-      tabIndex={-1}
+      class="modal-backdrop fade"
+    />
+    <div
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
+        class="modal-dialog"
+        tabindex="-1"
       >
         <div
-          className="modal-footer"
+          class="modal-content"
         >
           <div
-            className="modal-item-first"
+            class="modal-footer"
           >
-            <button
-              className="btn btn-primary"
-              type="button"
+            <div
+              class="modal-item-first"
             >
-              Bar
-            </button>
-          </div>
-          <div
-            className="modal-item"
-          >
-            <button
-              className="btn btn-primary"
-              type="button"
+              <button
+                class="btn btn-primary"
+                type="button"
+              >
+                Bar
+              </button>
+            </div>
+            <div
+              class="modal-item"
             >
-              Baz
-            </button>
-          </div>
-          <div
-            className="modal-item-last"
-          >
-            <button
-              className="btn btn-primary"
-              onClick={[Function]}
-              type="button"
+              <button
+                class="btn btn-primary"
+                type="button"
+              >
+                Baz
+              </button>
+            </div>
+            <div
+              class="modal-item-last"
             >
-              Foo
-            </button>
+              <button
+                class="btn btn-primary"
+                type="button"
+              >
+                Foo
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
 
 exports[`ClayModal renders with Header 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
     <div
-      className="modal-dialog"
-      tabIndex={-1}
+      class="modal-backdrop fade"
+    />
+    <div
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
+        class="modal-dialog"
+        tabindex="-1"
       >
         <div
-          className="modal-header"
+          class="modal-content"
         >
           <div
-            className="modal-title"
-          >
-            Foo
-          </div>
-          <button
-            aria-label="close"
-            className="close btn btn-unstyled"
-            onClick={[Function]}
-            type="button"
+            class="modal-header"
           >
-            <svg
-              className="lexicon-icon lexicon-icon-times"
-              role="presentation"
+            <div
+              class="modal-title"
             >
-              <use
-                xlinkHref="icons.svg#times"
-              />
-            </svg>
-          </button>
+              Foo
+            </div>
+            <button
+              aria-label="close"
+              class="close btn btn-unstyled"
+              type="button"
+            >
+              <svg
+                class="lexicon-icon lexicon-icon-times"
+                role="presentation"
+              >
+                <use
+                  xlink:href="icons.svg#times"
+                />
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
 
 exports[`ClayModal renders with size 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
+    <div
+      class="modal-backdrop fade"
+    />
     <div
-      className="modal-dialog modal-lg"
-      tabIndex={-1}
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
-      />
+        class="modal-dialog modal-lg"
+        tabindex="-1"
+      >
+        <div
+          class="modal-content"
+        />
+      </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
 
 exports[`ClayModal renders with status 1`] = `
-Array [
-  <div
-    className="modal-backdrop fade"
-  />,
-  <div
-    className="fade modal d-block"
-  >
+<body
+  class="modal-open"
+>
+  <div>
+    <div
+      class="modal-backdrop fade"
+    />
     <div
-      className="modal-dialog modal-success"
-      tabIndex={-1}
+      class="fade modal d-block"
     >
       <div
-        className="modal-content"
-      />
+        class="modal-dialog modal-success"
+        tabindex="-1"
+      >
+        <div
+          class="modal-content"
+        />
+      </div>
     </div>
-  </div>,
-]
+  </div>
+  <div />
+</body>
 `;
diff --git a/packages/clay-modal/src/__tests__/index.tsx b/packages/clay-modal/src/__tests__/index.tsx
index 6543cea1e0..d8477c3e01 100644
--- a/packages/clay-modal/src/__tests__/index.tsx
+++ b/packages/clay-modal/src/__tests__/index.tsx
@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import * as TestRenderer from 'react-test-renderer';
 import Button from '@clayui/button';
-import ClayModal from '..';
+import ClayModal, {useModal} from '..';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {cleanup, render} from '@testing-library/react';
 
 const spritemap = 'icons.svg';
 
@@ -22,83 +22,111 @@ describe('ClayModal', () => {
 
 	afterEach(() => {
 		jest.restoreAllMocks();
+		cleanup();
 	});
 
 	it('renders', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal onClose={() => {}} spritemap={spritemap}>
-				{onClose => (
-					<>
-						<ClayModal.Header>{'Foo'}</ClayModal.Header>
-						<ClayModal.Body>
-							<h1>{'Hello world!'}</h1>
-						</ClayModal.Body>
-						<ClayModal.Footer
-							last={
-								<Button onClick={onClose}>{'Primary'}</Button>
-							}
-						/>
-					</>
-				)}
-			</ClayModal>
-		);
-
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		const ModalWithState = () => {
+			const {observer, onClose} = useModal({onClose: () => {}});
+
+			return (
+				<ClayModal observer={observer} spritemap={spritemap}>
+					<ClayModal.Header>{'Foo'}</ClayModal.Header>
+					<ClayModal.Body>
+						<h1>{'Hello world!'}</h1>
+					</ClayModal.Body>
+					<ClayModal.Footer
+						last={<Button onClick={onClose}>{'Primary'}</Button>}
+					/>
+				</ClayModal>
+			);
+		};
+
+		render(<ModalWithState />);
+
+		expect(document.body).toMatchSnapshot();
 	});
 
 	it('renders with Header', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal onClose={() => {}} spritemap={spritemap}>
-				{() => <ClayModal.Header>{'Foo'}</ClayModal.Header>}
-			</ClayModal>
-		);
-
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		const ModalWithState = () => {
+			const {observer} = useModal({onClose: () => {}});
+			return (
+				<ClayModal observer={observer} spritemap={spritemap}>
+					<ClayModal.Header>{'Foo'}</ClayModal.Header>
+				</ClayModal>
+			);
+		};
+
+		render(<ModalWithState />);
+
+		expect(document.body).toMatchSnapshot();
 	});
 
 	it('renders with size', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal onClose={() => {}} size="lg" spritemap={spritemap} />
-		);
-
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		const ModalWithState = () => {
+			const {observer} = useModal({onClose: () => {}});
+			return (
+				<ClayModal
+					observer={observer}
+					size="lg"
+					spritemap={spritemap}
+				/>
+			);
+		};
+
+		render(<ModalWithState />);
+
+		expect(document.body).toMatchSnapshot();
 	});
 
 	it('renders with status', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal
-				onClose={() => {}}
-				spritemap={spritemap}
-				status="success"
-			/>
-		);
-
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		const ModalWithState = () => {
+			const {observer} = useModal({onClose: () => {}});
+			return (
+				<ClayModal
+					observer={observer}
+					spritemap={spritemap}
+					status="success"
+				/>
+			);
+		};
+
+		render(<ModalWithState />);
+
+		expect(document.body).toMatchSnapshot();
 	});
 
 	it('renders a body component with url', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal onClose={() => {}} spritemap={spritemap}>
-				{() => <ClayModal.Body url="http://localhost" />}
-			</ClayModal>
-		);
-
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		const ModalWithState = () => {
+			const {observer} = useModal({onClose: () => {}});
+			return (
+				<ClayModal observer={observer} spritemap={spritemap}>
+					<ClayModal.Body url="http://localhost" />
+				</ClayModal>
+			);
+		};
+
+		render(<ModalWithState />);
+
+		expect(document.body).toMatchSnapshot();
 	});
 
 	it('renders a footer component with buttons', () => {
-		const testRenderer = TestRenderer.create(
-			<ClayModal onClose={() => {}} spritemap={spritemap}>
-				{onClose => (
+		const ModalWithState = () => {
+			const {observer, onClose} = useModal({onClose: () => {}});
+			return (
+				<ClayModal observer={observer} spritemap={spritemap}>
 					<ClayModal.Footer
 						first={<Button>{'Bar'}</Button>}
 						last={<Button onClick={onClose}>{'Foo'}</Button>}
 						middle={<Button>{'Baz'}</Button>}
 					/>
-				)}
-			</ClayModal>
-		);
+				</ClayModal>
+			);
+		};
+
+		render(<ModalWithState />);
 
-		expect(testRenderer.toJSON()).toMatchSnapshot();
+		expect(document.body).toMatchSnapshot();
 	});
 });
diff --git a/packages/clay-modal/src/types.ts b/packages/clay-modal/src/types.ts
index 3b8847249a..658cf5c47b 100644
--- a/packages/clay-modal/src/types.ts
+++ b/packages/clay-modal/src/types.ts
@@ -7,3 +7,13 @@
 export type Status = 'danger' | 'info' | 'success' | 'warning';
 
 export type Size = 'full-screen' | 'lg' | 'sm';
+
+export enum ObserverType {
+	Close = 0,
+	Open = 1,
+}
+
+export type Observer = {
+	dispatch: (type: ObserverType) => void;
+	mutation: boolean;
+};
diff --git a/packages/clay-modal/src/useModal.tsx b/packages/clay-modal/src/useModal.tsx
new file mode 100644
index 0000000000..cd0bc2a402
--- /dev/null
+++ b/packages/clay-modal/src/useModal.tsx
@@ -0,0 +1,72 @@
+/**
+ * © 2019 Liferay, Inc. <https://liferay.com>
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {ObserverType} from './types';
+import {useEffect, useRef, useState} from 'react';
+
+interface IProps {
+	/**
+	 * Callback called to close the modal.
+	 */
+	onClose?: () => void;
+}
+
+const delay = (fn: Function) => {
+	return setTimeout(() => {
+		fn();
+	}, 100);
+};
+
+const modalOpenClassName = 'modal-open';
+
+export const useModal = ({onClose = () => {}}: IProps) => {
+	const [visible, setVisible] = useState<boolean>(false);
+	const timerIdRef = useRef<NodeJS.Timeout | null>(null);
+
+	/**
+	 * Control the close of the modal to create the component's "unmount"
+	 * animation and call the onClose prop with delay.
+	 */
+	const handleCloseModal = () => {
+		document.body.classList.remove(modalOpenClassName);
+		setVisible(false);
+		timerIdRef.current = delay(onClose);
+	};
+
+	const handleOpenModal = () => {
+		document.body.classList.add(modalOpenClassName);
+		timerIdRef.current = delay(() => setVisible(true));
+	};
+
+	const handleObserverDispatch = (type: ObserverType) => {
+		switch (type) {
+			case ObserverType.Close:
+				handleCloseModal();
+				break;
+			case ObserverType.Open:
+				handleOpenModal();
+				break;
+			default:
+				break;
+		}
+	};
+
+	useEffect(() => {
+		return () => {
+			if (timerIdRef.current) {
+				clearTimeout(timerIdRef.current);
+			}
+		};
+	}, []);
+
+	return {
+		observer: {
+			dispatch: handleObserverDispatch,
+			mutation: visible,
+		},
+		onClose: handleCloseModal,
+	};
+};