From e21ca560929f91dc36140196c07563c82d421bf6 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 14 Mar 2022 20:08:59 +0000
Subject: [PATCH] chore: update readme

---
 README.md                   | 33 ++++++++++++++++++++++++++++-----
 packages/dockview/README.md | 14 +++++++++++++-
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index c12d7a34a..e7e8e9684 100644
--- a/README.md
+++ b/README.md
@@ -69,12 +69,29 @@ You should also attach a dockview theme to an element containing your components
 Demonstrated below is a high level example of a `DockviewReact` component. You can follow a similar pattern for `GridviewReact`, `SplitviewReact` and `PaneviewReact` components too, see examples for more.
 
 ```tsx
-import { DockviewReact, DockviewReadyEvent, PanelCollection.IDockviewPanelProps } from 'dockview';
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    PanelCollection,
+    IDockviewPanelProps,
+    IDockviewPanelHeaderProps,
+} from 'dockview';
 
 const components: PanelCollection<IDockviewPanelProps> = {
-  default: (props: IDockviewPanelProps<{someProps: string}>) => {
-    return <div>{props.params.someProps}</div>
-  }
+    default: (props: IDockviewPanelProps<{ someProps: string }>) => {
+        return <div>{props.params.someProps}</div>;
+    },
+};
+
+const headers: PanelCollection<IDockviewPanelHeaderProps> = {
+    customTab: (props: IDockviewPanelHeaderProps) => {
+        return (
+            <div>
+                <span>{props.api.title}</span>
+                <span onClick={() => props.api.close()}>{'[x]'}</span>
+            </div>
+        );
+    },
 };
 
 const Component = () => {
@@ -96,7 +113,13 @@ const Component = () => {
         });
     };
 
-    return <DockviewReact components={components} onReady={onReady} />;
+    return (
+        <DockviewReact
+            components={components}
+            tabComponents={headers}
+            onReady={onReady}
+        />
+    );
 };
 ```
 
diff --git a/packages/dockview/README.md b/packages/dockview/README.md
index c12d7a34a..2116f4926 100644
--- a/packages/dockview/README.md
+++ b/packages/dockview/README.md
@@ -77,6 +77,17 @@ const components: PanelCollection<IDockviewPanelProps> = {
   }
 };
 
+const headers: PanelCollection<IDockviewPanelHeaderProps> = {
+    customHeader: (props) => {
+        return (
+            <div>
+                <span>{props.api.title}</span>
+                <span onClick={() => props.api.close()}>{'[x]'}</span>
+            </div>
+        );
+    },
+};
+
 const Component = () => {
     const onReady = (event: DockviewReadyEvent) => {
         event.api.addPanel({
@@ -89,6 +100,7 @@ const Component = () => {
         event.api.addPanel({
             id: 'panel2',
             component: 'default',
+            tabComponent: 'customHeader', // optional custom header
             params: {
                 someProps: 'World',
             },
@@ -96,7 +108,7 @@ const Component = () => {
         });
     };
 
-    return <DockviewReact components={components} onReady={onReady} />;
+    return <DockviewReact components={components} tabComponents={headers} onReady={onReady} />;
 };
 ```