import Layout from '../../components/Layout'
import { ComponentsSidebar } from '../../sidebars'
import { Playground } from '../../components/Playground';
import SyntaxHighlighter from '../../components/SyntaxHighlighter';

export default function Portal() {
    return (
        <Layout
            title="Portal"
            showHero
            description="knkUI wrapper for rendering components in React portals"
            sidebar={ComponentsSidebar}
        >
            <h2>Best Practive</h2>
            <p>
                Portals are used for rendering parts of a React component tree into a different part of the DOM. This is particularly useful for UI components that need to appear over the top of other components.
            </p>
            <p>
                Mount and unmount events will be fired when portal elements are added or removed.
                These events contain the type of element and its z-index. The events will be one of <code>knkPortalMount</code> or <code>knkPortalUnmount</code>. These constants (<code>PORTAL_MOUNT_EVENT</code> and <code>PORTAL_UNMOUNT_EVENT</code>) are exported from this package.
                The type of the event itself, <code>PortalEvent</code> is also exported from the package. Due to custom events not being entirely supported in IE11, we create a normal event and add a detail object manually to the event.
            </p>
            <p>
                Example PortalEvent:
            </p>
            <SyntaxHighlighter
                language="json"
                children={`
                    {
  type: "knkPortalMount",
  detail: {
    layer: "modal"
    zIndex: 510
  }
  ...(Normal event properties)
}
                `}
            />

            <h2>Usage</h2>
            <p>This example renders a <code>&lt;div /&gt;</code> and <code>&lt;h2 /&gt;</code> into a Portal.</p>
            <SyntaxHighlighter
                language="tsx"
                children={`
                    import React from 'react';
import { Portal } from '@knkui/portal';

const Modal = () => (
  <Portal>
    <div>
      <h2>Modal dialog heading</h2>
    </div>
  </Portal>
)
                `}
            />
        </Layout>
    )
}