
```jsx
import { COffcanvas } from '@coreui/react'
// or
import COffcanvas from '@coreui/react/src/components/offcanvas/COffcanvas'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="coffcanvas-backdrop">
        <td className="text-primary fw-semibold">backdrop<a href="#coffcanvas-backdrop" aria-label="COffcanvas backdrop permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code>, <code>{`'static'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Apply a backdrop on body while offcanvas is open.</p>
        </td>
      </tr>
      <tr id="coffcanvas-class-name">
        <td className="text-primary fw-semibold">className<a href="#coffcanvas-class-name" aria-label="COffcanvas className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="coffcanvas-dark">
        <td className="text-primary fw-semibold">dark<a href="#coffcanvas-dark" aria-label="COffcanvas dark permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets a darker color scheme.</p>
        </td>
      </tr>
      <tr id="coffcanvas-keyboard">
        <td className="text-primary fw-semibold">keyboard<a href="#coffcanvas-keyboard" aria-label="COffcanvas keyboard permalink" className="anchor-link after">#</a></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Closes the offcanvas when escape key is pressed.</p>
        </td>
      </tr>
      <tr id="coffcanvas-on-hide">
        <td className="text-primary fw-semibold">onHide<a href="#coffcanvas-on-hide" aria-label="COffcanvas onHide permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be hidden.</p>
        </td>
      </tr>
      <tr id="coffcanvas-on-show">
        <td className="text-primary fw-semibold">onShow<a href="#coffcanvas-on-show" aria-label="COffcanvas onShow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be shown.</p>
        </td>
      </tr>
      <tr id="coffcanvas-placement">
        <td className="text-primary fw-semibold">placement<a href="#coffcanvas-placement" aria-label="COffcanvas placement permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'start'`}</code>, <code>{`'end'`}</code>, <code>{`'top'`}</code>, <code>{`'bottom'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Components placement, there’s no default placement.</p>
        </td>
      </tr>
      <tr id="coffcanvas-portal">
        <td className="text-primary fw-semibold">portal<a href="#coffcanvas-portal" aria-label="COffcanvas portal permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Generates modal using createPortal.</p>
        </td>
      </tr>
      <tr id="coffcanvas-responsive">
        <td className="text-primary fw-semibold">responsive<a href="#coffcanvas-responsive" aria-label="COffcanvas responsive permalink" className="anchor-link after">#</a><span className="badge bg-success">4.6.0+</span></td>
        <td><code>{`true`}</code></td>
        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.</p>
        </td>
      </tr>
      <tr id="coffcanvas-scroll">
        <td className="text-primary fw-semibold">scroll<a href="#coffcanvas-scroll" aria-label="COffcanvas scroll permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Allow body scrolling while offcanvas is open</p>
        </td>
      </tr>
      <tr id="coffcanvas-visible">
        <td className="text-primary fw-semibold">visible<a href="#coffcanvas-visible" aria-label="COffcanvas visible permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the visibility of offcanvas component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
