diff --git a/src/Offcanvas.js b/src/Offcanvas.js
index 701e040b7..49a2b8e39 100644
--- a/src/Offcanvas.js
+++ b/src/Offcanvas.js
@@ -241,7 +241,10 @@ class Offcanvas extends React.Component {
   }
 
   setFocus() {
-    if (this._dialog.current && typeof this._dialog.current.focus === 'function') {
+    if (
+      this._dialog.current &&
+      typeof this._dialog.current.focus === 'function'
+    ) {
       this._dialog.current.focus();
     }
   }
diff --git a/stories/Offcanvas.stories.js b/stories/Offcanvas.stories.js
index 97eb952f2..08d24e928 100644
--- a/stories/Offcanvas.stories.js
+++ b/stories/Offcanvas.stories.js
@@ -13,5 +13,5 @@ export default {
   },
 };
 
-export { default as Offcanvas } from './examples/Offcanvas';
-export { default as Props } from './examples/OffcanvasProps';
+export { default as Offcanvas } from './examples/Offcanvas/Offcanvas';
+export { default as Props } from './examples/Offcanvas/OffcanvasProps';
diff --git a/stories/examples/Offcanvas/Offcanvas.js b/stories/examples/Offcanvas/Offcanvas.js
new file mode 100644
index 000000000..8ce82db96
--- /dev/null
+++ b/stories/examples/Offcanvas/Offcanvas.js
@@ -0,0 +1,28 @@
+import Example from './OffcanvasExample';
+// eslint-disable-next-line import/extensions
+import OffcanvasExample from '!!raw-loader!./OffcanvasExample';
+
+Example.parameters = {
+  docs: {
+    source: {
+      code: OffcanvasExample,
+      language: 'jsx',
+      type: 'auto',
+    },
+  },
+};
+
+Example.args = {
+  backdrop: true,
+  fade: true,
+  scrollable: false,
+};
+
+Example.argTypes = {
+  direction: {
+    control: { type: 'select' },
+    options: ['top', 'start', 'end', 'bottom'],
+  },
+};
+
+export default Example;
diff --git a/stories/examples/Offcanvas.js b/stories/examples/Offcanvas/OffcanvasExample.js
similarity index 77%
rename from stories/examples/Offcanvas.js
rename to stories/examples/Offcanvas/OffcanvasExample.js
index 998ada160..57619ec2d 100644
--- a/stories/examples/Offcanvas.js
+++ b/stories/examples/Offcanvas/OffcanvasExample.js
@@ -25,17 +25,4 @@ function Example(args) {
   );
 }
 
-Example.args = {
-  backdrop: true,
-  fade: true,
-  scrollable: false,
-};
-
-Example.argTypes = {
-  direction: {
-    control: { type: 'select' },
-    options: ['top', 'start', 'end', 'bottom'],
-  },
-};
-
 export default Example;
diff --git a/stories/examples/OffcanvasProps.js b/stories/examples/Offcanvas/OffcanvasProps.js
similarity index 88%
rename from stories/examples/OffcanvasProps.js
rename to stories/examples/Offcanvas/OffcanvasProps.js
index 117b8aab7..5d6af24a0 100644
--- a/stories/examples/OffcanvasProps.js
+++ b/stories/examples/Offcanvas/OffcanvasProps.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
-import Props from './Props';
+import Props from '../Props';
 
 function Example() {
   return <Props components={[Offcanvas, OffcanvasBody, OffcanvasHeader]} />;