diff --git a/docs/lib/Components/OffcanvasPage.js b/docs/lib/Components/OffcanvasPage.js
new file mode 100644
index 000000000..d5f9eeeae
--- /dev/null
+++ b/docs/lib/Components/OffcanvasPage.js
@@ -0,0 +1,80 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import PageTitle from '../UI/PageTitle';
+import SectionTitle from '../UI/SectionTitle';
+
+import OffcanvasExample from '../examples/Offcanvas';
+const OffcanvasExampleSource = require('!!raw-loader!../examples/Offcanvas');
+
+export default class OffcanvasPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageTitle title="Offcanvas" />
+        <div className="docs-example">
+          <OffcanvasExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {OffcanvasExampleSource}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Properties</SectionTitle>
+        <pre>
+          <PrismCode className="language-jsx">
+{`
+Offcanvas.propTypes = {
+  autoFocus: PropTypes.bool,
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+  backdropClassName: PropTypes.string,
+  backdropTransition: FadePropTypes,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  container: targetPropType,
+  cssModule: PropTypes.object,
+  direction: PropTypes.oneOf(['start', 'end', 'bottom', 'left', 'right']),
+  fade: PropTypes.bool,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func,]),
+  isOpen: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  offcanvasClassName: PropTypes.string,
+  offcanvasTransition: FadePropTypes,
+  onClosed: PropTypes.func,
+  onEnter: PropTypes.func,
+  onExit: PropTypes.func,
+  onOpened: PropTypes.func,
+  returnFocusAfterClose: PropTypes.bool,
+  role: PropTypes.string,
+  scrollable: PropTypes.bool,
+  toggle: PropTypes.func,
+  trapFocus: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
+  wrapClassName: PropTypes.string,
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string,])
+}
+
+OffcanvasBody.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+}
+
+OffcanvasHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  close: PropTypes.object,
+  closeAriaLabel: PropTypes.string,
+  cssModule: PropTypes.object,
+  tag: tagPropType,
+  toggle: PropTypes.func,
+  wrapTag: tagPropType
+}
+`}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}
diff --git a/docs/lib/Components/index.js b/docs/lib/Components/index.js
index 8280105bf..4421613ad 100644
--- a/docs/lib/Components/index.js
+++ b/docs/lib/Components/index.js
@@ -86,6 +86,10 @@ const items = [
     name: 'Navs',
     to: '/components/navs/'
   },
+  {
+    name: 'Offcanvas',
+    to: '/components/offcanvas/'
+  },
   {
     name: 'Placeholder',
     to: '/components/placeholder/'
diff --git a/docs/lib/examples/Offcanvas.js b/docs/lib/examples/Offcanvas.js
new file mode 100644
index 000000000..2924bd3a6
--- /dev/null
+++ b/docs/lib/examples/Offcanvas.js
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Button, ButtonToolbar, Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
+
+const Example = () => {
+  const [direction, setDirection] = useState();
+  const [open, setOpen] = useState();
+  const toggle = () => setOpen(!open);
+
+  return (
+    <div>
+      <ButtonToolbar>
+        <Button
+          color="primary"
+          onClick={() => {
+            setDirection('start');
+            setOpen(true);
+          }}
+        >
+          Open Start (default)
+        </Button>
+        <Button
+          onClick={() => {
+            setDirection('end');
+            setOpen(true);
+          }}
+        >
+          Open End
+        </Button>
+        <Button
+          color="success"
+          onClick={() => {
+            setDirection('top');
+            setOpen(true);
+          }}
+        >
+          Open Top
+        </Button>
+        <Button
+          color="danger"
+          onClick={() => {
+            setDirection('bottom');
+            setOpen(true);
+          }}
+        >
+          Open Bottom
+        </Button>
+      </ButtonToolbar>
+      <Offcanvas isOpen={open} direction={direction} toggle={toggle}>
+        <OffcanvasHeader toggle={toggle}>
+          Offcanvas {direction}
+        </OffcanvasHeader>
+        <OffcanvasBody>
+          <strong>This is the Offcanvas body.</strong>
+        </OffcanvasBody>
+      </Offcanvas>
+    </div>
+  );
+};
+
+export default Example;
diff --git a/docs/lib/routes.js b/docs/lib/routes.js
index 7fcd4734e..f43a8f080 100644
--- a/docs/lib/routes.js
+++ b/docs/lib/routes.js
@@ -5,6 +5,7 @@ import PremiumThemes from './PremiumThemes';
 import LayoutPage from './Components/LayoutPage';
 import NavsPage from './Components/NavsPage';
 import NavbarPage from './Components/NavbarPage';
+import OffcanvasPage from './Components/OffcanvasPage';
 import BreadcrumbsPage from './Components/BreadcrumbsPage';
 import ButtonsPage from './Components/ButtonsPage';
 import ButtonGroupPage from './Components/ButtonGroupPage';
@@ -63,6 +64,7 @@ const routes = (
         <Route path="layout/" component={LayoutPage} />
         <Route path="navs/" component={NavsPage} />
         <Route path="navbar/" component={NavbarPage} />
+        <Route path="offcanvas/" component={OffcanvasPage} />
         <Route path="media/" component={MediaPage} />
         <Route path="pagination/" component={PaginationPage} />
         <Route path="tabs/" component={TabsPage} />
diff --git a/package.json b/package.json
index 23c9b8e98..e0a61e0e6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "reactstrap",
   "version": "9.0.0-0",
-  "description": "React Bootstrap 4 components",
+  "description": "React Bootstrap components",
   "main": "lib/index.js",
   "types": "es/index.d.ts",
   "jsnext:main": "es/index.js",
diff --git a/src/Offcanvas.js b/src/Offcanvas.js
new file mode 100644
index 000000000..6ad7abdf1
--- /dev/null
+++ b/src/Offcanvas.js
@@ -0,0 +1,444 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Portal from './Portal';
+import Fade from './Fade';
+import {
+  TransitionTimeouts,
+  conditionallyUpdateScrollbar,
+  focusableElements,
+  getOriginalBodyPadding,
+  getTarget,
+  keyCodes,
+  mapToCssModules,
+  omit,
+  setScrollbarWidth,
+  targetPropType,
+} from './utils';
+
+function noop() { }
+
+const FadePropTypes = PropTypes.shape(Fade.propTypes);
+
+const propTypes = {
+  autoFocus: PropTypes.bool,
+  backdrop: PropTypes.bool,
+  backdropClassName: PropTypes.string,
+  backdropTransition: FadePropTypes,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  container: targetPropType,
+  cssModule: PropTypes.object,
+  direction: PropTypes.oneOf(['start', 'end', 'bottom', 'top', 'left', 'right']),
+  fade: PropTypes.bool,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func,]),
+  isOpen: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  offcanvasTransition: FadePropTypes,
+  onClosed: PropTypes.func,
+  onEnter: PropTypes.func,
+  onExit: PropTypes.func,
+  onOpened: PropTypes.func,
+  returnFocusAfterClose: PropTypes.bool,
+  role: PropTypes.string,
+  scrollable: PropTypes.bool,
+  toggle: PropTypes.func,
+  trapFocus: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string,])
+};
+
+const propsToOmit = Object.keys(propTypes);
+
+const defaultProps = {
+  isOpen: false,
+  autoFocus: true,
+  direction: 'start',
+  scrollable: false,
+  role: 'dialog',
+  backdrop: true,
+  keyboard: true,
+  zIndex: 1050,
+  fade: true,
+  onOpened: noop,
+  onClosed: noop,
+  offcanvasTransition: {
+    timeout: TransitionTimeouts.Offcanvas,
+  },
+  backdropTransition: {
+    mountOnEnter: true,
+    timeout: TransitionTimeouts.Fade, // uses standard fade transition
+  },
+  unmountOnClose: true,
+  returnFocusAfterClose: true,
+  container: 'body',
+  trapFocus: false
+};
+
+class Offcanvas extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this._element = null;
+    this._originalBodyPadding = null;
+    this.getFocusableChildren = this.getFocusableChildren.bind(this);
+    this.handleBackdropClick = this.handleBackdropClick.bind(this);
+    this.handleBackdropMouseDown = this.handleBackdropMouseDown.bind(this);
+    this.handleEscape = this.handleEscape.bind(this);
+    this.handleTab = this.handleTab.bind(this);
+    this.onOpened = this.onOpened.bind(this);
+    this.onClosed = this.onClosed.bind(this);
+    this.manageFocusAfterClose = this.manageFocusAfterClose.bind(this);
+    this.clearBackdropAnimationTimeout = this.clearBackdropAnimationTimeout.bind(this);
+    this.trapFocus = this.trapFocus.bind(this);
+
+    this.state = {
+      isOpen: false
+    };
+  }
+
+  componentDidMount() {
+    const { isOpen, autoFocus, onEnter } = this.props;
+
+    if (isOpen) {
+      this.init();
+      this.setState({ isOpen: true })
+      if (autoFocus) {
+        this.setFocus();
+      }
+    }
+
+    if (onEnter) {
+      onEnter();
+    }
+
+    // traps focus inside the Offcanvas, even if the browser address bar is focused
+    document.addEventListener('focus', this.trapFocus, true);
+
+    this._isMounted = true;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.isOpen && !prevProps.isOpen) {
+      this.init();
+      this.setState({ isOpen: true });
+
+      return;
+    }
+
+    // now Offcanvas Dialog is rendered and we can refer this._element and this._dialog
+    if (this.props.autoFocus && this.state.isOpen && !prevState.isOpen) {
+      this.setFocus();
+    }
+
+    if (this._element && prevProps.zIndex !== this.props.zIndex) {
+      this._element.style.zIndex = this.props.zIndex;
+    }
+  }
+
+  componentWillUnmount() {
+    this.clearBackdropAnimationTimeout();
+
+    if (this.props.onExit) {
+      this.props.onExit();
+    }
+
+    if (this._element) {
+      this.destroy();
+      if (this.props.isOpen || this.state.isOpen) {
+        this.close();
+      }
+    }
+
+    document.removeEventListener('focus', this.trapFocus, true);
+    this._isMounted = false;
+  }
+
+  trapFocus (ev) {
+    if (!this.props.trapFocus) {
+      return;
+    }
+
+    if (!this._element) //element is not attached
+      return;
+
+    if (this._dialog === ev.target) // initial focus when the Offcanvas is opened
+      return;
+
+    if (this.offcanvasIndex < (Offcanvas.openCount - 1)) // last opened offcanvas
+      return;
+
+    const children = this.getFocusableChildren();
+
+    for (let i = 0; i < children.length; i++) { // focus is already inside the Offcanvas
+      if (children[i] === ev.target)
+        return;
+    }
+
+    if (children.length > 0) { // otherwise focus the first focusable element in the Offcanvas
+      ev.preventDefault();
+      ev.stopPropagation();
+      children[0].focus();
+    }
+  }
+
+  onOpened(node, isAppearing) {
+    this.props.onOpened();
+    (this.props.offcanvasTransition.onEntered || noop)(node, isAppearing);
+  }
+
+  onClosed(node) {
+    const { unmountOnClose } = this.props;
+    // so all methods get called before it is unmounted
+    this.props.onClosed();
+    (this.props.offcanvasTransition.onExited || noop)(node);
+
+    if (unmountOnClose) {
+      this.destroy();
+    }
+    this.close();
+
+    if (this._isMounted) {
+      this.setState({ isOpen: false });
+    }
+  }
+
+  setFocus() {
+    if (this._dialog && typeof this._dialog.focus === 'function') {
+      this._dialog.focus();
+    }
+  }
+
+  getFocusableChildren() {
+    return this._element.querySelectorAll(focusableElements.join(', '));
+  }
+
+  getFocusedChild() {
+    let currentFocus;
+    const focusableChildren = this.getFocusableChildren();
+
+    try {
+      currentFocus = document.activeElement;
+    } catch (err) {
+      currentFocus = focusableChildren[0];
+    }
+    return currentFocus;
+  }
+
+  // not mouseUp because scrollbar fires it, shouldn't close when user scrolls
+  handleBackdropClick(e) {
+    if (e.target === this._mouseDownElement) {
+      e.stopPropagation();
+      const backdrop = this._backdrop;
+
+      if (!this.props.isOpen || this.props.backdrop !== true) return;
+
+      if (backdrop && e.target === backdrop && this.props.toggle) {
+        this.props.toggle(e);
+      }
+    }
+  }
+
+  handleTab(e) {
+    if (e.which !== 9) return;
+    if (this.offcanvasIndex < (Offcanvas.openCount - 1)) return; // last opened offcanvas
+
+    const focusableChildren = this.getFocusableChildren();
+    const totalFocusable = focusableChildren.length;
+    if (totalFocusable === 0) return;
+    const currentFocus = this.getFocusedChild();
+
+    let focusedIndex = 0;
+
+    for (let i = 0; i < totalFocusable; i += 1) {
+      if (focusableChildren[i] === currentFocus) {
+        focusedIndex = i;
+        break;
+      }
+    }
+
+    if (e.shiftKey && focusedIndex === 0) {
+      e.preventDefault();
+      focusableChildren[totalFocusable - 1].focus();
+    } else if (!e.shiftKey && focusedIndex === totalFocusable - 1) {
+      e.preventDefault();
+      focusableChildren[0].focus();
+    }
+  }
+
+  handleBackdropMouseDown(e) {
+    this._mouseDownElement = e.target;
+  }
+
+  handleEscape(e) {
+    if (this.props.isOpen && e.keyCode === keyCodes.esc && this.props.toggle) {
+      if (this.props.keyboard) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        this.props.toggle(e);
+      }
+    }
+  }
+
+  init() {
+    try {
+      this._triggeringElement = document.activeElement;
+    } catch (err) {
+      this._triggeringElement = null;
+    }
+
+    if (!this._element) {
+      this._element = document.createElement('div');
+      this._element.setAttribute('tabindex', '-1');
+      this._element.style.position = 'relative';
+      this._element.style.zIndex = this.props.zIndex;
+      this._mountContainer = getTarget(this.props.container);
+      this._mountContainer.appendChild(this._element);
+    }
+
+    this._originalBodyPadding = getOriginalBodyPadding();
+    conditionallyUpdateScrollbar();
+
+    if (Offcanvas.openCount === 0 && (this.props.backdrop && !this.props.scrollable)) {
+      document.body.style.overflow = 'hidden'; 
+    }
+
+    this.offcanvasIndex = Offcanvas.openCount;
+    Offcanvas.openCount += 1;
+  }
+
+  destroy() {
+    if (this._element) {
+      this._mountContainer.removeChild(this._element);
+      this._element = null;
+    }
+
+    this.manageFocusAfterClose();
+  }
+
+  manageFocusAfterClose() {
+    if (this._triggeringElement) {
+      const { returnFocusAfterClose } = this.props;
+      if (this._triggeringElement.focus && returnFocusAfterClose) this._triggeringElement.focus();
+      this._triggeringElement = null;
+    }
+  }
+
+  close() {
+    this.manageFocusAfterClose();
+    Offcanvas.openCount = Math.max(0, Offcanvas.openCount - 1);
+
+    document.body.style.overflow = null; 
+    setScrollbarWidth(this._originalBodyPadding);
+  }
+
+  render() {
+    const {
+      direction,
+      unmountOnClose
+    } = this.props;
+
+    if (!!this._element && (this.state.isOpen || !unmountOnClose)) {
+      const isOffcanvasHidden = !!this._element && !this.state.isOpen && !unmountOnClose;
+      this._element.style.display = isOffcanvasHidden ? 'none' : 'block';
+
+      const {
+        className,
+        backdropClassName,
+        cssModule,
+        isOpen,
+        backdrop,
+        role,
+        labelledBy,
+        style
+      } = this.props;
+
+      const offcanvasAttributes = {
+        onKeyUp: this.handleEscape,
+        onKeyDown: this.handleTab,
+        'aria-labelledby': labelledBy,
+        role,
+        tabIndex: '-1'
+      };
+
+      const hasTransition = this.props.fade;
+      const offcanvasTransition = {
+        ...Fade.defaultProps,
+        ...this.props.offcanvasTransition,
+        baseClass: hasTransition ? this.props.offcanvasTransition.baseClass : '',
+        timeout: hasTransition ? this.props.offcanvasTransition.timeout : 0,
+      };
+      const backdropTransition = {
+        ...Fade.defaultProps,
+        ...this.props.backdropTransition,
+        baseClass: hasTransition ? this.props.backdropTransition.baseClass : '',
+        timeout: hasTransition ? this.props.backdropTransition.timeout : 0,
+      };
+
+      const Backdrop = backdrop && (
+        hasTransition ?
+          (<Fade
+            {...backdropTransition}
+            in={isOpen && !!backdrop}
+            innerRef={(c) => {
+              this._backdrop = c;
+            }}
+            cssModule={cssModule}
+            className={mapToCssModules(classNames('offcanvas-backdrop', backdropClassName), cssModule)}
+            onClick={this.handleBackdropClick}
+            onMouseDown={this.handleBackdropMouseDown}
+          />)
+          : <div
+              className={mapToCssModules(classNames('offcanvas-backdrop', 'show', backdropClassName), cssModule)}
+              onClick={this.handleBackdropClick}
+              onMouseDown={this.handleBackdropMouseDown}
+            />
+      );
+
+      const attributes = omit(this.props, propsToOmit);
+
+      return (
+        <Portal node={this._element}>
+          <Fade
+            {...attributes}
+            {...offcanvasAttributes}
+            {...offcanvasTransition}
+            in={isOpen}
+            onEntered={this.onOpened}
+            onExited={this.onClosed}
+            cssModule={cssModule}
+            className={mapToCssModules(classNames('offcanvas', className,
+              `offcanvas-${direction}`
+            ), cssModule)}
+            innerRef={(c) => {
+              this._dialog = c;
+            }}
+            style={{
+              ...style,
+              visibility: isOpen ? 'visible' : 'hidden'
+            }}
+          >
+            {this.props.children}
+          </Fade>
+          {Backdrop}
+        </Portal>
+      );
+    }
+    return null;
+  }
+
+  clearBackdropAnimationTimeout() {
+    if (this._backdropAnimationTimeout) {
+      clearTimeout(this._backdropAnimationTimeout);
+      this._backdropAnimationTimeout = undefined;
+    }
+  }
+}
+
+Offcanvas.propTypes = propTypes;
+Offcanvas.defaultProps = defaultProps;
+Offcanvas.openCount = 0;
+
+export default Offcanvas;
diff --git a/src/OffcanvasBody.js b/src/OffcanvasBody.js
new file mode 100644
index 000000000..dd908b8ac
--- /dev/null
+++ b/src/OffcanvasBody.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules, tagPropType } from './utils';
+
+const propTypes = {
+  tag: tagPropType,
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+};
+
+const defaultProps = {
+  tag: 'div',
+};
+
+const OffcanvasBody = (props) => {
+  const {
+    className,
+    cssModule,
+    tag: Tag,
+    ...attributes } = props;
+  const classes = mapToCssModules(classNames(
+    className,
+    'offcanvas-body'
+  ), cssModule);
+
+  return (
+    <Tag {...attributes} className={classes} />
+  );
+};
+
+OffcanvasBody.propTypes = propTypes;
+OffcanvasBody.defaultProps = defaultProps;
+
+export default OffcanvasBody;
diff --git a/src/OffcanvasHeader.js b/src/OffcanvasHeader.js
new file mode 100644
index 000000000..a68cffe63
--- /dev/null
+++ b/src/OffcanvasHeader.js
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { mapToCssModules, tagPropType } from './utils';
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  close: PropTypes.object,
+  closeAriaLabel: PropTypes.string,
+  cssModule: PropTypes.object,
+  tag: tagPropType,
+  toggle: PropTypes.func,
+  wrapTag: tagPropType
+};
+
+const defaultProps = {
+  closeAriaLabel: 'Close',
+  tag: 'h5',
+  wrapTag: 'div'
+};
+
+const OffcanvasHeader = (props) => {
+  let closeButton;
+  const {
+    children,
+    className,
+    close,
+    closeAriaLabel,
+    cssModule,
+    tag: Tag,
+    toggle,
+    wrapTag: WrapTag,
+    ...attributes } = props;
+
+  const classes = mapToCssModules(classNames(
+    className,
+    'offcanvas-header'
+  ), cssModule);
+
+  if (!close && toggle) {
+    closeButton = (
+      <button type="button" onClick={toggle} className={mapToCssModules('btn-close', cssModule)} aria-label={closeAriaLabel} />
+    );
+  }
+
+  return (
+    <WrapTag {...attributes} className={classes}>
+      <Tag className={mapToCssModules('offcanvas-title', cssModule)}>
+        {children}
+      </Tag>
+      {close || closeButton}
+    </WrapTag>
+  );
+};
+
+OffcanvasHeader.propTypes = propTypes;
+OffcanvasHeader.defaultProps = defaultProps;
+
+export default OffcanvasHeader;
diff --git a/src/__tests__/Offcanvas.spec.js b/src/__tests__/Offcanvas.spec.js
new file mode 100644
index 000000000..e55790119
--- /dev/null
+++ b/src/__tests__/Offcanvas.spec.js
@@ -0,0 +1,864 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import { Offcanvas, OffcanvasBody, OffcanvasHeader, OffcanvasFooter, Button } from '../';
+import { keyCodes } from '../utils';
+
+describe('Offcanvas', () => {
+  let isOpen;
+  let toggle;
+
+  beforeEach(() => {
+    isOpen = false;
+    toggle = () => { isOpen = !isOpen; };
+
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    document.getElementsByTagName('html')[0].innerHTML = ''; 
+
+    // fast forward time for offcanvas to fade out
+    jest.runTimersToTime(300);
+    jest.clearAllTimers();
+  });
+
+  it('should render offcanvas portal into DOM', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(wrapper.childAt(0).children().length).not.toBe(0);
+    wrapper.unmount();
+  });
+
+  it('should render with the class "offcanvas"', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with the backdrop with the class "offcanvas-backdrop" by default', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should not render with the backdrop with the class "offcanvas-backdrop" when backdrop is "false"', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} backdrop={false}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('should render with class "offcanvas" and have custom class name if provided', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} className="my-custom-offcanvas">
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('my-custom-offcanvas').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with additional props if provided', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} style={{ maxWidth: '95%' }}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('offcanvas')[0].style.maxWidth).toBe('95%');
+    wrapper.unmount();
+  });
+
+  it('should render without fade transition if provided with fade={false}', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} fade={false} className="fadeless-offcanvas">
+        Howdy!
+      </Offcanvas>
+    );
+
+    // Offcanvas should appear instantaneously
+    jest.runTimersToTime(1);
+
+    const matchedOffcanvass = document.getElementsByClassName('fadeless-offcanvas');
+    const matchedOffcanvas = matchedOffcanvass[0];
+
+    expect(matchedOffcanvass.length).toBe(1);
+    // Offcanvas should not have the 'fade' class
+    expect(matchedOffcanvas.className.split(' ').indexOf('fade') < 0).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('should render when expected when passed offcanvasTransition and backdropTransition props', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas
+        isOpen={isOpen}
+        toggle={toggle}
+        offcanvasTransition={{ timeout: 2 }}
+        backdropTransition={{ timeout: 10 }}
+        className="custom-timeout-offcanvas"
+      >
+        Hello, world!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(20);
+
+    const matchedOffcanvass = document.getElementsByClassName('custom-timeout-offcanvas');
+
+    expect(matchedOffcanvass.length).toBe(1);
+
+    wrapper.unmount();
+  });
+
+  it('should render with class "offcanvas-backdrop" and have custom class name if provided with backdropClassName', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} backdropClassName="my-custom-offcanvas">
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.querySelectorAll('.offcanvas-backdrop.my-custom-offcanvas').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with the class "offcanvas-${direction}" when direction is passed', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} direction="top">
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('offcanvas-top').length).toBe(1);
+    wrapper.unmount();
+  });
+
+
+  it('should render offcanvas when isOpen is true', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render offcanvas with default role of "dialog"', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas')[0].getAttribute('role')).toBe('dialog');
+    wrapper.unmount();
+  });
+
+  it('should render offcanvas with provided role', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} role="alert">
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas')[0].getAttribute('role')).toBe('alert');
+    wrapper.unmount();
+  });
+
+  it('should render offcanvas with aria-labelledby provided labelledBy', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} labelledBy="myOffcanvasTitle">
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(document.getElementsByClassName('offcanvas')[0].getAttribute('aria-labelledby')).toBe('myOffcanvasTitle');
+    wrapper.unmount();
+  });
+
+  it('should not render offcanvas when isOpen is false', () => {
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(wrapper.childAt(0).children().length).toBe(0);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(0);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(0);
+    wrapper.unmount();
+  });
+
+  it('should toggle offcanvas', () => {
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(false);
+    expect(wrapper.childAt(0).children().length).toBe(0);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(0);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(0);
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should call onClosed & onOpened', () => {
+    jest.spyOn(Offcanvas.prototype, 'onOpened');
+    jest.spyOn(Offcanvas.prototype, 'onClosed');
+    const onOpened = jest.fn();
+    const onClosed = jest.fn();
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} onOpened={onOpened} onClosed={onClosed} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(false);
+    expect(onOpened).not.toHaveBeenCalled();
+    expect(Offcanvas.prototype.onOpened).not.toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+    expect(Offcanvas.prototype.onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(onOpened).toHaveBeenCalled();
+    expect(Offcanvas.prototype.onOpened).toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+    expect(Offcanvas.prototype.onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(onClosed).toHaveBeenCalled();
+    expect(Offcanvas.prototype.onClosed).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('should call onClosed & onOpened when fade={false}', () => {
+    const onOpened = jest.fn();
+    const onClosed = jest.fn();
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} onOpened={onOpened} onClosed={onClosed} toggle={toggle} fade={false}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(1);
+    expect(isOpen).toBe(false);
+    expect(onOpened).not.toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(1);
+
+    expect(isOpen).toBe(true);
+    expect(onOpened).toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(1);
+
+    expect(isOpen).toBe(false);
+    expect(onClosed).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('should not call init when isOpen does not change', () => {
+    jest.spyOn(Offcanvas.prototype, 'init');
+    jest.spyOn(Offcanvas.prototype, 'componentDidUpdate');
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(false);
+    expect(Offcanvas.prototype.init).not.toHaveBeenCalled();
+    expect(Offcanvas.prototype.componentDidUpdate).not.toHaveBeenCalled();
+
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(Offcanvas.prototype.init).not.toHaveBeenCalled();
+    expect(Offcanvas.prototype.componentDidUpdate).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('should close offcanvas when escape key pressed', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+
+    instance.handleEscape({ keyCode: 13 });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+
+    const escapeKeyUpEvent = {
+      keyCode: keyCodes.esc,
+      preventDefault: jest.fn(() => {}),
+      stopPropagation: jest.fn(() => {}),
+    };
+
+    instance.handleEscape(escapeKeyUpEvent);
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(escapeKeyUpEvent.preventDefault.mock.calls.length).toBe(1);
+    expect(escapeKeyUpEvent.stopPropagation.mock.calls.length).toBe(1);
+
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(document.getElementsByClassName('offcanvas').length).toBe(0);
+
+    wrapper.unmount();
+  });
+
+  it('should not close offcanvas when escape key pressed when keyboard is false', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} keyboard={false}>
+        Yo!
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+
+    instance.handleEscape({ keyCode: 13 });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+
+    instance.handleEscape({ keyCode: 27 });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(document.getElementsByClassName('offcanvas').length).toBe(1);
+
+    wrapper.unmount();
+  });
+
+  it('should close offcanvas when clicking backdrop', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        <button id="clicker">Does Nothing</button>
+      </Offcanvas>
+    );
+
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(document.getElementsByClassName('offcanvas-backdrop').length).toBe(1);
+
+    document.getElementById('clicker').click();
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+
+    const backdrop = document.getElementsByClassName('offcanvas-backdrop')[0];
+
+    const mouseDownEvent = document.createEvent('MouseEvents');
+    mouseDownEvent.initEvent('mousedown', true, true);
+    backdrop.dispatchEvent(mouseDownEvent);
+
+    const clickEvent = document.createEvent('MouseEvents');
+    clickEvent.initEvent('click', true, true);
+    backdrop.dispatchEvent(clickEvent);
+
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+
+    wrapper.unmount();
+  });
+
+  it('should destroy this._element', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        <button id="clicker">Does Nothing</button>
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+    expect(instance._element).toBeTruthy();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(instance._element).toBe(null);
+
+    wrapper.unmount();
+  });
+
+  it('should destroy this._element when unmountOnClose prop set to true', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} unmountOnClose={true}>
+        <button id="clicker">Does Nothing</button>
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+    expect(instance._element).toBeTruthy();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(instance._element).toBe(null);
+
+    wrapper.unmount();
+  });
+
+  it('should not destroy this._element when unmountOnClose prop set to false', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle} unmountOnClose={false}>
+        <button id="clicker">Does Nothing</button>
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+    expect(instance._element).toBeTruthy();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(false);
+    expect(instance._element).toBeTruthy();
+
+    wrapper.unmount();
+  });
+
+  it('should destroy this._element on unmount', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        <button id="clicker">Does Nothing</button>
+      </Offcanvas>
+    );
+    const instance = wrapper.instance();
+
+    jest.runTimersToTime(300);
+    expect(instance._element).toBeTruthy();
+
+    wrapper.unmount();
+    jest.runTimersToTime(300);
+
+    expect(instance._element).toBe(null);
+  });
+
+  it('should remove exactly visibility styles from body', () => {
+    // set a body class which includes offcanvas-open
+    document.body.style.background = 'blue';
+
+    const wrapper = mount(
+      <Offcanvas isOpen={false} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    // assert that the offcanvas is closed and the body class is what was set initially
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(false);
+    expect(document.body.style.background).toBe('blue');
+    expect(document.body.style.overflow).toBe('');
+
+    toggle();
+    wrapper.setProps({
+      isOpen: true
+    });
+
+    // assert that the offcanvas is open and the body class is what was set initially + offcanvas-open
+    jest.runTimersToTime(300);
+    expect(isOpen).toBe(true);
+    wrapper.update();
+    expect(document.body.style.background).toBe('blue');
+    expect(document.body.style.overflow).toBe('hidden');
+
+    // append another body class which includes offcanvas-open
+    // using this to test if replace will leave a space when removing offcanvas-open
+    document.body.style.color = 'red';
+    expect(document.body.style.background).toBe('blue');
+    expect(document.body.style.color).toBe('red');
+    expect(document.body.style.overflow).toBe('hidden');
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+
+    // assert that the offcanvas is closed and the body class is what was set initially
+    jest.runTimersToTime(301);
+    expect(isOpen).toBe(false);
+    expect(document.body.style.background).toBe('blue');
+    expect(document.body.style.color).toBe('red');
+    expect(document.body.style.overflow).toBe('');
+
+    wrapper.unmount();
+  });
+
+  it('should call onEnter & onExit props if provided', () => {
+    const onEnter = jest.fn();
+    const onExit = jest.fn();
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} onEnter={onEnter} onExit={onExit} toggle={toggle}>
+        Yo!
+      </Offcanvas>
+    );
+
+    expect(isOpen).toBe(false);
+    expect(onEnter).toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+
+    onEnter.mockReset();
+    onExit.mockReset();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    expect(isOpen).toBe(true);
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onExit).not.toHaveBeenCalled();
+
+    onEnter.mockReset();
+    onExit.mockReset();
+
+    toggle();
+    wrapper.setProps({
+      isOpen: isOpen
+    });
+    jest.runTimersToTime(300);
+
+    wrapper.unmount();
+    expect(onEnter).not.toHaveBeenCalled();
+    expect(onExit).toHaveBeenCalled();
+  });
+
+  it('should update element z index when prop changes', () => {
+    const wrapper = shallow(
+      <Offcanvas isOpen zIndex={0}>
+        Yo!
+      </Offcanvas>
+    );
+    expect(wrapper.instance()._element.style.zIndex).toBe('0');
+    wrapper.setProps({ zIndex: 1 });
+    expect(wrapper.instance()._element.style.zIndex).toBe('1');
+  });
+
+  it('should allow focus on only focusable elements', () => {
+    isOpen = true;
+
+    const wrapper = mount(
+      <Offcanvas isOpen={isOpen} toggle={toggle}>
+        <OffcanvasHeader toggle={toggle}>Offcanvas title</OffcanvasHeader>
+        <OffcanvasBody>
+          <a alt="test" href="/">Test</a>
+          <map name="test">
+            <area alt="test" href="/" coords="200,5,200,30" />
+          </map>
+          <input type="text" />
+          <input type="hidden" />
+          <input type="text" disabled value="Test" />
+          <select name="test" id="select_test">
+            <option>Test item</option>
+          </select>
+          <select name="test" id="select_test_disabled" disabled>
+            <option>Test item</option>
+          </select>
+          <textarea name="textarea_test" id="textarea_test" cols="30" rows="10" />
+          <textarea name="textarea_test_disabled" id="textarea_test_disabled" cols="30" rows="10" disabled />
+          <object>Test</object>
+          <span tabIndex="0">test tab index</span>
+        </OffcanvasBody>
+      </Offcanvas>
+    );
+
+    const instance = wrapper.instance();
+    expect(instance.getFocusableChildren().length).toBe(9);
+    wrapper.unmount();
+  });
+
+  it('should return the focus to the last focused element before the offcanvas has opened', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Offcanvas isOpen={isOpen}>
+            <OffcanvasBody>Whatever</OffcanvasBody>
+          </Offcanvas>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(true);
+    wrapper.unmount();
+  })
+
+  it('should not return the focus to the last focused element before the offcanvas has opened when "returnFocusAfterClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Offcanvas isOpen={isOpen} returnFocusAfterClose={false} >
+            <OffcanvasBody>Whatever</OffcanvasBody>
+          </Offcanvas>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(false);
+    wrapper.unmount();
+  })
+
+  it('should return the focus to the last focused element before the offcanvas has opened when "unmountOnClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Offcanvas isOpen={isOpen} unmountOnClose={false}>
+            <OffcanvasBody>Whatever</OffcanvasBody>
+          </Offcanvas>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(true);
+    wrapper.unmount();
+  })
+
+  it('should not return the focus to the last focused element before the offcanvas has opened when "returnFocusAfterClose" is false and "unmountOnClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}/>
+          <Offcanvas isOpen={isOpen} returnFocusAfterClose={false} unmountOnClose={false}>
+            <OffcanvasBody>Whatever</OffcanvasBody>
+          </Offcanvas>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(false);
+    wrapper.unmount();
+  });
+
+  it('should attach/detach trapFocus for dialogs', () => {
+    const addEventListenerFn = document.addEventListener,
+          removeEventListenerFn = document.removeEventListener;
+    document.addEventListener = jest.fn();
+    document.removeEventListener = jest.fn();
+
+    const MockComponent = () => (
+          <>
+            <Offcanvas isOpen={true}>
+              <OffcanvasBody>
+                  <Button className={'focus'}>focusable element</Button>
+              </OffcanvasBody>
+            </Offcanvas>
+          </>),
+          wrapper = mount(<MockComponent />),
+          offcanvas_instance = wrapper.find(Offcanvas).instance();
+
+    expect(document.addEventListener.mock.calls.length).toBe(1);
+    expect(document.addEventListener.mock.calls[0]).toEqual(['focus', offcanvas_instance.trapFocus, true]);
+
+    wrapper.unmount();
+
+    expect(document.removeEventListener.mock.calls.length).toBe(1);
+    expect(document.removeEventListener.mock.calls[0]).toEqual(['focus', offcanvas_instance.trapFocus, true]);
+
+    // restore global document mock
+    document.addEventListener = addEventListenerFn;
+    document.removeEventListener = removeEventListenerFn;
+  });
+
+  it('should trap focus inside the open dialog', () => {
+    const MockComponent = () => (
+          <>
+            <Button className="first">Focused</Button>
+            <Offcanvas isOpen trapFocus>
+              <OffcanvasBody>
+                Something else to see
+                <Button className="focus">focusable element</Button>
+              </OffcanvasBody>
+            </Offcanvas>
+          </>
+        );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper.find('.first').hostNodes().getDOMNode();
+    const offcanvas_instance = wrapper.find(Offcanvas).instance();
+    const ev_mock = {
+      target: button,
+      preventDefault: jest.fn(),
+      stopPropagation: jest.fn()
+    };
+    button.focus();
+    offcanvas_instance.trapFocus(ev_mock);
+    jest.runAllTimers();
+
+    expect(document.activeElement).not.toBe(button);
+    expect(ev_mock.preventDefault.mock.calls.length).toBe(1);
+    expect(ev_mock.stopPropagation.mock.calls.length).toBe(1);
+    wrapper.unmount();
+  });
+});
diff --git a/src/__tests__/OffcanvasBody.spec.js b/src/__tests__/OffcanvasBody.spec.js
new file mode 100644
index 000000000..80b29c73d
--- /dev/null
+++ b/src/__tests__/OffcanvasBody.spec.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { OffcanvasBody } from '../';
+
+describe('OffcanvasBody', () => {
+  it('should render with "offcanvas-body" class', () => {
+    const wrapper = shallow(<OffcanvasBody>Yo!</OffcanvasBody>);
+
+    expect(wrapper.text()).toBe('Yo!');
+    expect(wrapper.hasClass('offcanvas-body')).toBe(true);
+  });
+
+  it('should render additional classes', () => {
+    const wrapper = shallow(<OffcanvasBody className="other">Yo!</OffcanvasBody>);
+
+    expect(wrapper.hasClass('other')).toBe(true);
+    expect(wrapper.hasClass('offcanvas-body')).toBe(true);
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<OffcanvasBody tag="main">Yo!</OffcanvasBody>);
+
+    expect(wrapper.text()).toBe('Yo!');
+    expect(wrapper.hasClass('offcanvas-body')).toBe(true);
+    expect(wrapper.type()).toBe('main');
+  });
+});
diff --git a/src/__tests__/OffcanvasHeader.spec.js b/src/__tests__/OffcanvasHeader.spec.js
new file mode 100644
index 000000000..ea1a9a3c8
--- /dev/null
+++ b/src/__tests__/OffcanvasHeader.spec.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { OffcanvasHeader } from '../';
+
+describe('OffcanvasHeader', () => {
+  it('should render with "offcanvas-header" class', () => {
+    const wrapper = shallow(<OffcanvasHeader>Yo!</OffcanvasHeader>);
+
+    expect(wrapper.text()).toBe('Yo!');
+    expect(wrapper.hasClass('offcanvas-header')).toBe(true);
+  });
+
+  it('should render additional classes', () => {
+    const wrapper = shallow(<OffcanvasHeader className="other">Yo!</OffcanvasHeader>);
+
+    expect(wrapper.hasClass('other')).toBe(true);
+    expect(wrapper.hasClass('offcanvas-header')).toBe(true);
+  });
+
+  it('should render close button', () => {
+    const wrapper = shallow(<OffcanvasHeader toggle={() => {}} className="other">Yo!</OffcanvasHeader>);
+
+    expect(wrapper.hasClass('other')).toBe(true);
+    expect(wrapper.hasClass('offcanvas-header')).toBe(true);
+    expect(wrapper.find('button.btn-close').length).toBe(1);
+  });
+
+  it('should render custom tag', () => {
+    const wrapper = shallow(<OffcanvasHeader tag="p">Yo!</OffcanvasHeader>).childAt(0);
+
+    expect(wrapper.text()).toBe('Yo!');
+    expect(wrapper.type()).toBe('p');
+  });
+
+  it('should render custom wrapping tag', () => {
+    const wrapper = shallow(<OffcanvasHeader wrapTag="main">Yo!</OffcanvasHeader>);
+
+    expect(wrapper.type()).toBe('main');
+  });
+});
diff --git a/src/index.js b/src/index.js
index 00fb189f7..b61058c2b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -70,6 +70,9 @@ export InputGroup from './InputGroup';
 export InputGroupText from './InputGroupText';
 export Label from './Label';
 export Media from './Media';
+export Offcanvas from './Offcanvas';
+export OffcanvasBody from './OffcanvasBody';
+export OffcanvasHeader from './OffcanvasHeader';
 export Pagination from './Pagination';
 export PaginationItem from './PaginationItem';
 export PaginationLink from './PaginationLink';
diff --git a/src/utils.js b/src/utils.js
index 7c14f927f..cfe554b75 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -153,6 +153,7 @@ export const TransitionTimeouts = {
   Collapse: 350, // $transition-collapse
   Modal:    300, // $modal-transition
   Carousel: 600, // $carousel-transition
+  Offcanvas: 300, // $offcanvas-transition
 };
 
 // Duplicated Transition.propType keys to ensure that Reactstrap builds
diff --git a/types/index.d.ts b/types/index.d.ts
index 497ca9f96..9aa94ac09 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -126,6 +126,12 @@ export { default as NavItem } from './lib/NavItem';
 export { NavItemProps } from './lib/NavItem';
 export { default as NavLink } from './lib/NavLink';
 export { NavLinkProps } from './lib/NavLink';
+export { default as Offcanvas } from './lib/Offcanvas';
+export { OffcanvasProps } from './lib/Offcanvas';
+export { default as OffcanvasBody } from './lib/OffcanvasBody';
+export { OffcanvasBodyProps } from './lib/OffcanvasBody';
+export { default as OffcanvasHeader } from './lib/OffcanvasHeader';
+export { OffcanvasHeaderProps } from './lib/OffcanvasHeader';
 export { default as Pagination } from './lib/Pagination';
 export { PaginationProps } from './lib/Pagination';
 export { default as PaginationItem } from './lib/PaginationItem';
diff --git a/types/lib/Offcanvas.d.ts b/types/lib/Offcanvas.d.ts
new file mode 100644
index 000000000..c6668cdf5
--- /dev/null
+++ b/types/lib/Offcanvas.d.ts
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CSSModule } from './index';
+import { FadeProps } from './Fade';
+
+export type Placement = 'start' | 'end' | 'left' | 'right' | 'bottom' | 'top';
+
+export interface OffcanvasProps extends React.HTMLAttributes<HTMLElement> {
+  [key: string]: any;
+  autoFocus?: boolean;
+  backdrop?: boolean | 'static';
+  backdropClassName?: string;
+  backdropTransition?: FadeProps;
+  container?: string | HTMLElement | React.RefObject<HTMLElement>;
+  contentClassName?: string;
+  cssModule?: CSSModule;
+  fade?: boolean;
+  innerRef?: React.Ref<HTMLElement>;
+  isOpen?: boolean;
+  keyboard?: boolean;
+  labelledBy?: string;
+  offcanvasClassName?: string;
+  offcanvasTransition?: FadeProps;
+  onClosed?: () => void;
+  onEnter?: () => void;
+  onExit?: () => void;
+  onOpened?: () => void;
+  placement?: Placement;
+  returnFocusAfterClose?: boolean;
+  scrollable?: boolean;
+  toggle?: React.KeyboardEventHandler<any> | React.MouseEventHandler<any>;
+  trapFocus?: boolean;
+  unmountOnClose?: boolean;
+  wrapClassName?: string;
+  zIndex?: number | string;
+}
+
+declare class Offcanvas extends React.Component<OffcanvasProps> {}
+export default Offcanvas;
diff --git a/types/lib/OffcanvasBody.d.ts b/types/lib/OffcanvasBody.d.ts
new file mode 100644
index 000000000..7f3af7a28
--- /dev/null
+++ b/types/lib/OffcanvasBody.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './index';
+
+export interface OffcanvasBodyProps extends React.HTMLAttributes<HTMLElement> {
+  [key: string]: any;
+  tag?: React.ElementType;
+  cssModule?: CSSModule;
+}
+
+declare class OffcanvasBody extends React.Component<OffcanvasBodyProps> {}
+export default OffcanvasBody;
diff --git a/types/lib/OffcanvasHeader.d.ts b/types/lib/OffcanvasHeader.d.ts
new file mode 100644
index 000000000..fb9506b7d
--- /dev/null
+++ b/types/lib/OffcanvasHeader.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './index';
+
+export interface OffcanvasHeaderProps extends React.HTMLAttributes<HTMLElement> {
+  [key: string]: any;
+  tag?: React.ElementType;
+  cssModule?: CSSModule;
+  wrapTag?: React.ElementType;
+  toggle?: React.MouseEventHandler<any>;
+}
+
+declare class OffcanvasHeader extends React.Component<OffcanvasHeaderProps> {}
+export default OffcanvasHeader;
diff --git a/types/lib/index.d.ts b/types/lib/index.d.ts
index 2c00e2e1b..cb3418ac8 100644
--- a/types/lib/index.d.ts
+++ b/types/lib/index.d.ts
@@ -122,6 +122,12 @@ export { default as NavItem } from './NavItem';
 export { NavItemProps } from './NavItem';
 export { default as NavLink } from './NavLink';
 export { NavLinkProps } from './NavLink';
+export { default as Offcanvas } from './Offcanvas';
+export { OffcanvasProps } from './Offcanvas';
+export { default as OffcanvasBody } from './OffcanvasBody';
+export { OffcanvasBodyProps } from './OffcanvasBody';
+export { default as OffcanvasHeader } from './OffcanvasHeader';
+export { OffcanvasHeaderProps } from './OffcanvasHeader';
 export { default as Pagination } from './Pagination';
 export { PaginationProps } from './Pagination';
 export { default as PaginationItem } from './PaginationItem';